/* judasaca.art — the art carries the colour, the site stays out of the way.
   White paper, black ink, and a lot of air. The only thing on the page that
   should shout is the painting. */

:root{
  --tinta:#0B0B0B; --gris:#6B6B6B; --tenue:#707070; --linea:#E6E6E6;
  --papel:#FFFFFF; --humo:#F6F5F3;
  --coral:#C9421F;   /* sacado del muro de la foto de About. 5.0:1 sobre blanco */
  --oro:#9A6A00;     /* la corona del grabado, bajada hasta que se pueda leer */
  --rojo:#C8102E;    /* solo para el sello de vendida. 6.0:1 sobre blanco */
  --max:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  color:var(--tinta);background:var(--papel);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.estrecho{max-width:760px}

/* ── barra ── */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.barra{max-width:var(--max);margin:0 auto;height:54px;padding:0 14px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.marca{justify-self:center;align-self:center;display:block;width:40px;line-height:0}
.marca img{width:100%}

/* Las tres rayas, pintadas a mano: son trazos de pincel, no lineas rectas.
   Es el unico guino de su estilo que se permite la interfaz. */
.trazo{justify-self:start;align-self:center;background:none;border:0;cursor:pointer;
  padding:8px;color:var(--tinta);display:flex;align-items:center;justify-content:center;
  line-height:0;height:38px}
.trazo svg{width:21px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;
  stroke-linecap:round;display:block}
.trazo:hover{opacity:.6}

/* ── menu en panel, entra por la izquierda ── */
.menu-panel{position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);background:#fff;
  z-index:130;transform:translateX(-102%);transition:transform .32s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;padding:26px 30px;box-shadow:8px 0 40px rgba(0,0,0,.10)}
.menu-panel.abierto{transform:none}
.menu-panel .x{align-self:flex-end;background:none;border:0;font-size:28px;line-height:1;
  cursor:pointer;color:var(--tinta);padding:2px 4px 14px}
nav{display:flex;flex-direction:column;gap:0}
nav a{font-size:15px;letter-spacing:1.4px;text-transform:uppercase;text-decoration:none;
  color:var(--tinta);padding:15px 0;border-bottom:1px solid var(--linea)}
nav a:hover{color:var(--gris)}
nav a.on{color:var(--gris)}
.menu-panel .abajo{margin-top:auto;padding-top:24px;font-size:12.5px;color:var(--tenue);
  line-height:1.7}
.menu-panel .abajo a{color:var(--tenue);text-decoration:none;border-bottom:1px solid var(--linea)}
.menu-panel .abajo a:hover{color:var(--tinta)}

/* ── carrito ── */
.carro{justify-self:end;align-self:center;display:flex;align-items:center;justify-content:center;
  gap:5px;background:none;border:0;cursor:pointer;color:var(--tinta);padding:8px;
  font-size:12.5px;height:38px}
.carro:hover{opacity:.6}
.carro svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;display:block}
.carro .n{font-variant-numeric:tabular-nums;min-width:12px;text-align:left}
.velo{position:fixed;inset:0;background:rgba(11,11,11,.38);z-index:120;display:none}
.velo.abierto{display:block}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:#fff;z-index:130;
  transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.12)}
.panel.abierto{transform:none}
.panel .alto{display:flex;align-items:center;justify-content:space-between;
  padding:24px 26px;border-bottom:1px solid var(--linea)}
.panel .alto h2{font-size:13px;letter-spacing:2.6px;text-transform:uppercase;font-weight:700}
.panel .x{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--tinta);padding:4px}
.panel .lista{flex:1;overflow-y:auto;padding:8px 26px}
.panel .vacio{color:var(--tenue);font-size:14.5px;padding:34px 0;text-align:center}
.item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--linea);align-items:flex-start}
.item img{width:62px;height:62px;object-fit:cover;flex-shrink:0;background:var(--humo)}
.item .d{flex:1;min-width:0}
.item .t{font-size:14px;font-weight:600;line-height:1.3}
.item .f{font-size:12px;color:var(--tenue);margin-top:2px}
.item .p{font-size:13.5px;font-weight:600;margin-top:5px}
.item .quitar{background:none;border:0;color:var(--tenue);font-size:11.5px;letter-spacing:1.2px;
  text-transform:uppercase;cursor:pointer;padding:6px 0 0;text-decoration:underline}
.item .quitar:hover{color:var(--tinta)}
.panel .bajo{border-top:1px solid var(--linea);padding:22px 26px 28px}
.panel .total{display:flex;justify-content:space-between;font-size:15px;font-weight:600;
  margin-bottom:16px}
.panel .bajo .btn{display:block;text-align:center;width:100%}
.panel .nota{font-size:12px;color:var(--tenue);margin-top:12px;line-height:1.5}

/* ── portada ── */
.hero{padding:40px 0 4px;text-align:center}
.hero .lema{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--tenue)}
.hero h1{font-size:clamp(30px,6.4vw,66px);font-weight:800;letter-spacing:-1.6px;
  line-height:1;margin:0 0 10px}
.hero p{color:var(--gris);max-width:620px;margin:0 auto;font-size:17px}

.portada-obra{margin:52px 0 0}
.portada-obra img{width:100%}
.pie-obra{font-size:12.5px;color:var(--tenue);letter-spacing:.4px;margin-top:12px;text-align:center}

/* ── titulares de seccion ── */
.tit{margin:0 0 34px}
.tit.centrado{text-align:center}
.tit.centrado p{margin-left:auto;margin-right:auto}
.tit .eti{font-size:11.5px;letter-spacing:3.4px;text-transform:uppercase;color:var(--tenue);
  margin-bottom:12px}
.tit h2{font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-1px;line-height:1.1}
.tit p{color:var(--gris);max-width:640px;margin-top:12px}
section{padding:74px 0}
section.humo{background:var(--humo)}

/* ── rejilla de obras ── */
.obras{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 30px}
.obra{display:flex;flex-direction:column;height:100%}
.obra figure{margin:0;display:flex;flex-direction:column;flex:1}
.obra figcaption{display:flex;flex-direction:column;flex:1}
/* Las fichas de la reja ya vienen cuadradas y centradas en la obra desde
   recortar.py, asi que aqui basta con que llenen el marco. No se recorta
   nada: la imagen y el marco tienen la misma proporcion. */
.obra .marco{background:var(--humo);overflow:hidden;flex:none;
  aspect-ratio:1/1;display:block;padding:0}
.obra img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.obra:hover img{transform:scale(1.035)}
/* Obra panoramica: dos celdas de ancho y marco 2:1. En celular la reja ya es
   de una columna, asi que solo cambia la proporcion del marco. */
.obra.ancha{grid-column:1 / -1}
.obra.ancha .marco{aspect-ratio:2/1}
.obra figcaption{padding-top:15px;text-align:center}
/* Los botones se van al fondo de la tarjeta, pase lo que pase encima. */
.obra .acciones{margin-top:auto;padding-top:13px}
.obra .linea{font-size:14px;line-height:1.5}
.obra .linea .t{font-weight:600}
.obra .linea .f{color:var(--tenue)}
.obra .linea .p{font-weight:600}
/* Donde se expuso la obra. Solo la llevan las que tienen historia que contar. */
.obra .expo{font-size:12px;line-height:1.45;color:var(--tenue);margin-top:5px;
  letter-spacing:.2px}

/* ══ Obra vendida ═══════════════════════════════════════════════════════
   Dos rayas rojas en diagonal, de arriba a la izquierda hacia abajo a la
   derecha, con la palabra en medio. El bloque entero se gira 45 grados, que en
   un marco cuadrado es exactamente la diagonal.
   ══════════════════════════════════════════════════════════════════════ */
.marco{position:relative}
.sello{position:absolute;top:50%;left:-14%;width:128%;
  transform:translateY(-50%) rotate(45deg);transform-origin:center;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  pointer-events:none;z-index:3}
.sello i{display:block;width:100%;height:3px;background:var(--rojo)}
.sello b{color:var(--rojo);font-size:15px;font-weight:800;letter-spacing:5px;
  text-transform:uppercase;line-height:1}
/* La foto pierde fuerza para que el sello se lea sin taparla del todo. */
.marco.vendido img{opacity:.62;filter:saturate(.5)}
.obra.agotada:hover .marco.vendido img{transform:none}

/* La ficha en gris y tachada: nombre, medida y precio de una sola pasada. */
.obra.agotada .linea{color:var(--tenue);text-decoration:line-through;
  text-decoration-color:var(--tenue);text-decoration-thickness:1px}
.obra.agotada .linea .t{font-weight:600;color:var(--tenue)}
.obra.agotada .linea .p{color:var(--tenue)}
.sello-vendida{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--rojo);border:1px solid var(--rojo);padding:10px 20px;display:inline-block}

/* Obra redonda dentro de marco cuadrado: llena y se recorta arriba y abajo. */
.obra .marco.recorte img{width:100%;height:100%;object-fit:cover;max-height:none}
.acciones{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap;justify-content:center;align-items:center}
/* Los dos botones miden lo mismo aunque el texto no: "Buy" es mucho mas corto
   que "Add to cart" y quedaban descuadrados uno al lado del otro. */
.acciones .btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
/* El hueco del boton de Bold: sin alto propio mientras esta vacio, para que no
   deje un espacio raro si el Worker no contesta. */
.pagar{display:inline-flex;align-items:center;line-height:0}
.pagar:empty{display:none}

/* Ya no hay formulario antes de pagar: la direccion se pide en la pagina de
   gracias, con el cobro hecho. Lo unico que sobrevive de aquel modal es el
   velo, que sigue siendo el fondo oscuro del carrito. */
.velo.abierto{display:flex;align-items:center;justify-content:center;padding:18px}

/* ── Pagina de gracias ── */
.gracias h3{font-size:20px;font-weight:800;letter-spacing:-.4px}
.gracias .forma{margin-top:20px;text-align:left}
.gracias .campo{margin-bottom:15px}
.btn{display:inline-block;font-family:inherit;font-size:11.5px;letter-spacing:1.6px;
  text-transform:uppercase;
  text-decoration:none;padding:10px 20px;border:1px solid var(--tinta);color:var(--tinta);
  background:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--tinta);color:#fff}
.btn.lleno{background:var(--tinta);color:#fff}
.btn.lleno:hover{background:#333}
/* Un boton apagado tiene que verse apagado. Si solo deja de responder, el
   comprador cree que la pagina se rompio. */
.btn:disabled,.btn[disabled]{opacity:.35;cursor:default;pointer-events:none}

/* Hueco donde Bold dibuja su boton dentro del carrito. Ocupa el ancho entero
   para que caiga exactamente donde estaba el de Checkout. */
.pagar-carro:empty{display:none}
.pagar-carro{display:block;margin-bottom:4px}
.pagar-carro>*{width:100%}

/* Aviso dentro del carrito: algo se vendio, o el checkout no responde. */
.panel .nota.aviso{color:var(--rojo);font-weight:500}
.panel .nota.aviso a{color:var(--rojo)}

/* ── franja de realidad aumentada ── */
.ar{background:var(--tinta);color:#fff;padding:74px 0}
.ar .eti{color:#8E8E8E}
.ar h2{color:#fff}
.ar p{color:#B9B9B9;max-width:640px}
.ar .caja{margin-top:34px;border:1px solid #262626;background:#111;padding:48px 32px;
  text-align:center;border-radius:2px}
.ar .caja .frase{font-size:clamp(20px,3vw,30px);font-weight:700;letter-spacing:-.5px;color:#fff}
.ar .caja .sub{color:#8E8E8E;font-size:14px;margin-top:10px}
.ar .btn{border-color:#fff;color:#fff;margin-top:24px}
.ar .btn:hover{background:#fff;color:var(--tinta)}

/* ── texto largo ── */
.prosa p{margin-bottom:20px;font-size:17px}
.prosa p.entrada{font-size:20px;color:var(--tinta)}
.prosa h3{font-size:19px;font-weight:700;margin:34px 0 12px}
.cita{border-left:2px solid var(--tinta);padding-left:22px;margin:30px 0;font-size:19px;
  line-height:1.5}
.cita cite{display:block;font-size:13px;color:var(--tenue);font-style:normal;margin-top:10px;
  letter-spacing:.4px}

.retrato{width:100%;display:block}
/* La foto pesaba casi la mitad de la fila. Bajada un 35%: la pagina respira y
   el texto deja de competir con ella. */
.dos{display:grid;grid-template-columns:.65fr 1.15fr;gap:52px;align-items:start}
@media(max-width:860px){.dos{grid-template-columns:1fr;gap:34px}
  .dos .foto{max-width:66%}}

/* ══ About ══════════════════════════════════════════════════════════════
   Minimalismo no es quitar cosas hasta que quede poco: es que lo que queda
   este bien puesto. Nada de lo de abajo agrega un elemento nuevo a la pagina,
   solo cambia como respira lo que ya estaba.
   ══════════════════════════════════════════════════════════════════════ */

/* La foto se queda quieta mientras el texto corre. Cuesta una linea y es lo
   que separa una pagina de artista de una hoja de Word. */
.dos .foto{position:sticky;top:78px;margin-inline:auto;max-width:100%}
@media(max-width:980px){.dos .foto{max-width:62%}}
.pie-foto{font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--coral);
  margin-top:12px}
@media(max-width:860px){.dos .foto{position:static}}

/* 64 caracteres. Mas largo y el ojo pierde el renglon al volver. */
.prosa.vida{max-width:64ch}
.prosa.vida p{margin-bottom:22px;line-height:1.72}
.prosa.vida p.entrada{font-size:clamp(21px,2.5vw,27px);line-height:1.4;letter-spacing:-.6px;
  color:var(--tinta);margin-bottom:30px}
/* El unico color del sitio, y sale de la foto: el rojo de los bloques que esta
   pintando en el muro. Va en media frase y en ninguna otra parte. Un acento
   que aparece dos veces deja de ser acento.
   El rojo de la foto es mas brillante, pero a ese tono el texto pequeno queda
   en 3.8:1 y no pasa. Este esta un paso mas hondo: mismo color, 5.0:1. */
.prosa.vida .mueve{color:var(--coral)}

/* Capitular en el primer parrafo del cuerpo. Recurso editorial de toda la vida,
   cero elementos nuevos, y marca donde empieza a leerse de verdad. */
.prosa.vida p.entrada + p::first-letter{float:left;font-size:62px;line-height:.82;
  font-weight:800;margin:7px 12px 0 0;color:var(--tinta)}

/* Los subtitulos dejan de competir con el titulo de la pagina y pasan a ser
   marcas de seccion: filete fino, versalitas, aire. */
/* Las marcas de seccion en coral: son las mismas versalitas que el pie de foto,
   asi que el ojo las agrupa como una sola voz que recorre la pagina. El filete
   se queda gris para que el color no se vuelva un bloque. */
.prosa.vida h3{font-size:11.5px;letter-spacing:3.4px;text-transform:uppercase;font-weight:600;
  color:var(--coral);margin:52px 0 16px;padding-top:24px;border-top:1px solid var(--linea)}

/* La cita sin barra lateral: filete arriba y tamano grande. Se lee como una
   pausa en la pagina y no como un bloque pegado al margen. */
.prosa.vida .cita{border-left:0;border-top:1px solid var(--tinta);padding:28px 0 0;
  margin:46px 0;font-size:clamp(20px,2.7vw,28px);line-height:1.32;letter-spacing:-.6px}
@media(max-width:680px){
  .prosa.vida p.entrada + p::first-letter{font-size:50px;margin-right:9px}
}

/* ══ Contacto ═══════════════════════════════════════════════════════════ */
/* Recorte 4:5 y encuadre un poco arriba del centro: se va el techo y se va la
   mesa, y quedan el y la obra, que es lo unico que importa de esa foto. */
/* Centrada, y encogida tambien en el telefono. Antes volvia al 100% debajo de
   680px, asi que en el celular no se reducia nada: por eso se veia igual. */
.obra-contacto{margin:0 auto 52px;max-width:58%}
.obra-contacto img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 34%}
@media(max-width:680px){.obra-contacto{max-width:78%}}
.obra-contacto figcaption{font-size:11px;letter-spacing:2.6px;text-transform:uppercase;
  margin-top:14px;text-align:center}
/* Los dos colores salen del propio grabado: el naranja del fondo y el amarillo
   de la corona. El amarillo real de la corona sobre blanco da menos de 2:1 y
   seria ilegible, asi que va un oro hondo del mismo tono, en 4.7:1. */
.obra-contacto figcaption .t1{color:var(--coral)}
.obra-contacto figcaption .t2{color:var(--oro)}

/* Campos sin caja: solo una linea abajo, como una hoja pautada. Es lo que
   mantiene el formulario dentro del minimalismo del resto del sitio. */
.forma{display:grid;gap:20px;margin-top:36px;max-width:580px}
.dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.campo label{display:block;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--tenue);margin-bottom:9px}
/* La linea sola era demasiado discreta: la gente no veia donde escribir. Ahora
   lleva una sombra corta colgando debajo, asi que el campo se lee como una
   ranura de verdad sin tener que meterle una caja alrededor y romper el
   minimalismo del resto del sitio. */
/* Fondo beige tibio en vez de blanco: el campo se ve antes de leer la etiqueta,
   y el papel del sitio sigue siendo blanco, asi que la forma se lee como una
   pieza aparte sin necesidad de bordes por los cuatro lados. */
.campo input,.campo textarea{width:100%;font-family:inherit;font-size:16px;color:var(--tinta);
  background:#F5F2EA;border:0;border-bottom:1.5px solid #C6BFAE;padding:13px 14px;
  border-radius:2px 2px 0 0;box-shadow:0 4px 7px -5px rgba(11,11,11,.4);
  transition:background .2s,border-color .2s,box-shadow .2s}
.campo input::placeholder,.campo textarea::placeholder{color:#A9A496}
.campo input:focus,.campo textarea:focus{outline:none;background:#F1EDE1;
  border-bottom-color:var(--tinta);box-shadow:0 5px 9px -5px rgba(11,11,11,.55)}
.campo input:focus + .ayuda,.campo textarea:focus + .ayuda{color:var(--tinta)}
.campo textarea{resize:vertical;min-height:130px;line-height:1.6}
.campo .ayuda{display:block;font-size:12px;color:#9A9894;margin-top:7px;transition:color .2s}
.forma .enviar{justify-self:start;margin-top:8px}
.forma .enviar[disabled]{opacity:.45;cursor:default}
.aviso-forma{font-size:14px;color:var(--gris);min-height:1.4em}
.aviso-forma.ok{color:#1B7F4B}
.aviso-forma.mal{color:#B4232B}
/* La trampa de robots: fuera de pantalla, nunca enfocable, invisible al lector
   de pantalla. Un humano no puede llenarla ni por accidente. */
.miel{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.o-bien{margin-top:34px;font-size:15px;color:var(--gris)}
.correo-linea{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--tinta)}
@media(max-width:560px){.dos-campos{grid-template-columns:1fr}}

/* ── prensa ── */
.prensa{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.prensa a{display:block;border:1px solid var(--linea);padding:22px 24px;text-decoration:none;
  transition:border-color .2s}
.prensa a:hover{border-color:var(--tinta)}
.prensa .medio{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--tenue)}
.prensa .titular{font-size:15.5px;font-weight:600;margin-top:7px;line-height:1.35}

/* ── hoja de vida ── */
.cv{border-top:1px solid var(--linea)}
.cv .anio{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:26px 0;
  border-bottom:1px solid var(--linea)}
.cv .anio h3{font-size:22px;font-weight:800;letter-spacing:-.5px}
.cv ul{list-style:none}
.cv li{padding:7px 0;font-size:15.5px;display:flex;gap:12px;flex-wrap:wrap}
.cv li .lugar{color:var(--tenue);font-size:14px}
.cv li .premio{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  border:1px solid var(--tinta);padding:2px 8px;align-self:center}

/* ── datos sueltos ── */
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:8px}
.dato .n{font-size:34px;font-weight:800;letter-spacing:-1.4px;line-height:1}
.dato .l{font-size:13px;color:var(--tenue);margin-top:6px}

/* ── tienda ── */
.pronto{border:1px dashed var(--tenue);padding:56px 34px;text-align:center}
.pronto h3{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.8px}
.pronto p{color:var(--gris);max-width:520px;margin:14px auto 0}

/* ── contacto ── */
.contacto a.correo{font-size:clamp(22px,4vw,38px);font-weight:700;letter-spacing:-1px;
  text-decoration:none;border-bottom:2px solid var(--tinta);padding-bottom:2px;
  display:inline-block;word-break:break-all}
.enlaces{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px}
.enlaces a{font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gris);
  text-decoration:none;border-bottom:1px solid var(--linea);padding-bottom:3px}
.enlaces a:hover{color:var(--tinta);border-bottom-color:var(--tinta)}

/* ── pie ── */
footer{border-top:1px solid var(--linea);padding:46px 0 60px;margin-top:20px}
.pie{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start}
.pie .col{font-size:13.5px;color:var(--gris)}
.pie .col b{display:block;color:var(--tinta);font-size:11px;letter-spacing:2.4px;
  text-transform:uppercase;margin-bottom:10px}
.pie a{text-decoration:none;color:var(--gris);display:block;padding:3px 0}
/* Un titulo que ademas es enlace. Sin senal nadie lo pulsa, asi que lleva
   subrayado tenue y cambia a tinta al pasar por encima. */
.pie .col b a.tit-enlace{display:inline;color:inherit;padding:0;
  border-bottom:1px solid var(--linea);transition:border-color .15s,color .15s}
.pie .col b a.tit-enlace:hover{color:var(--tinta);border-bottom-color:var(--tinta)}
.pie a:hover{color:var(--tinta)}
.pie .fin{margin-left:auto;text-align:right;font-size:12px;color:var(--tenue)}
/* La nota de pagos: discreta, pero presente. Un comprador que va a poner 1.950
   dolares mira el pie antes de decidirse. */
.seguro{display:block;margin-top:14px;font-size:11.5px;line-height:1.55;color:var(--tenue);
  border-top:1px solid var(--linea);padding-top:12px}
.seguro a{display:inline;color:var(--tenue);text-decoration:none;
  border-bottom:1px solid var(--linea);padding:0}
.seguro a:hover{color:var(--tinta);border-bottom-color:var(--tinta)}
/* Tabla de terceros: sin bordes, solo aire. Es una lista con dos columnas,
   no una hoja de calculo. */
.tabla-privacidad{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:15.5px}
.tabla-privacidad td{padding:11px 0;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla-privacidad td:first-child{width:150px;padding-right:20px}
@media(max-width:560px){.tabla-privacidad td{display:block;border-bottom:0;padding:3px 0}
  .tabla-privacidad td:last-child{padding-bottom:16px;border-bottom:1px solid var(--linea)}}
@media(max-width:680px){.seguro{border-top:0;padding-top:0}}

@media(max-width:980px){
  .obras{grid-template-columns:repeat(2,1fr)}
  .dos{grid-template-columns:1fr;gap:34px}
  .datos{grid-template-columns:repeat(2,1fr)}
  .prensa{grid-template-columns:1fr}
}
@media(max-width:680px){
  .wrap{padding:0 20px}
  .barra{padding:15px 20px}
  .obras{grid-template-columns:repeat(2,1fr);gap:26px 14px}
  .obra .linea{font-size:12.5px;line-height:1.45;display:flex;flex-direction:column;
    align-items:center;gap:3px}
  .obra .linea .t{font-size:14px;font-weight:700}
  .obra .linea .f{font-size:12px}
  .obra .linea .p{font-size:13.5px;font-weight:700;margin-top:1px}
  .obra .expo{font-size:11px;margin-top:6px}
  .obra figcaption{padding-top:11px}
  .acciones{gap:6px;margin-top:10px}
  .acciones .btn{font-size:10px;padding:8px 11px;letter-spacing:1.1px}
  .datos{grid-template-columns:1fr;gap:20px}
  .cv .anio{grid-template-columns:1fr;gap:8px}
  section{padding:54px 0}
  .pie .fin{margin-left:0;text-align:left;width:100%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ── lupa de obras ── */
.lupa{position:fixed;inset:0;z-index:200;background:rgba(11,11,11,.96);
  display:none;align-items:center;justify-content:center;padding:64px 22px}
.lupa.viendo{display:flex}
.lupa figure{margin:0;max-width:min(1100px,92vw);text-align:center}
.lupa img{max-width:100%;max-height:78vh;width:auto;margin:0 auto}
.lupa figcaption{color:#B9B9B9;font-size:13px;letter-spacing:.4px;margin-top:16px}
.lupa .cerrar,.lupa .pasar{position:absolute;background:none;border:0;color:#fff;
  cursor:pointer;line-height:1;padding:14px}
.lupa .cerrar{top:14px;right:18px;font-size:34px}
.lupa .pasar{top:50%;transform:translateY(-50%);font-size:46px}
.lupa .ant{left:8px} .lupa .sig{right:8px}
.lupa .cerrar:hover,.lupa .pasar:hover{color:#B9B9B9}
.obra .marco{display:block;cursor:zoom-in}
/* En celular las flechas de pasar foto quedaban pegadas al borde, a media
   altura y encima de la propia imagen: se perdian. Aqui bajan a una fila
   debajo de la ficha, como dos botones redondos de 52 px, que es tamano de
   dedo. La imagen cede alto para dejarles sitio. */
@media(max-width:680px){
  .lupa{padding:56px 12px 96px}
  .lupa img{max-height:60vh}
  .lupa figcaption{margin-top:12px;font-size:12.5px}
  .lupa .pasar{top:auto;bottom:22px;transform:none;font-size:30px;padding:0;
    width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);
    display:flex;align-items:center;justify-content:center}
  .lupa .pasar:active{background:rgba(255,255,255,.26)}
  .lupa .ant{left:calc(50% - 62px)}
  .lupa .sig{right:calc(50% - 62px)}
  .lupa .cerrar{top:10px;right:10px;width:48px;height:48px;padding:0;font-size:30px;
    display:flex;align-items:center;justify-content:center}
}

/* ── portada, al estilo de la referencia: titulo, una obra, y ya ── */
.hero h1{font-style:italic}
.portada-obra{max-width:380px;margin:26px auto 0}
.portada-obra a{display:block;cursor:zoom-in}
.entrada-home{max-width:620px;margin:52px auto 0;text-align:center;padding-bottom:16px}
.entrada-home p{color:var(--gris);font-size:17px;margin-bottom:26px}
@media(max-width:680px){
  .marca{width:36px}
  .barra{padding:0 10px}
  .portada-obra{margin-top:20px}
}

.fallo{font-size:12px;color:var(--rojo);line-height:1.5}


/* ══ TIENDA · LA TIRA DE LIENZOS ═════════════════════════════════════════
   Tres lienzos de muestra que llevan a la pagina de arte. Es el mismo truco
   de la caja de las medias: una imagen dice mas que un enlace de texto. */
.lienzos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.lienzos .lienzo{display:block;overflow:hidden;background:var(--humo);
  aspect-ratio:1/1;border-radius:2px}
.lienzos .lienzo img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.lienzos .lienzo:hover img{transform:scale(1.04)}
@media(max-width:560px){.lienzos{gap:9px}}

/* La ficha de las medias va sola, fuera de la reja de tres. */
.medias-prod{max-width:560px}