@font-face{font-family:'Urbanist';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fuentes/urbanist.ttf) format('truetype');}

:root{--bl:#fff;--ng:#0A0A0A;--g1:#5A5A5A;--g2:#AAAAAA;--gl:#CCCCCC;--rj:#E0201A}
*{box-sizing:border-box}
body{margin:0;background:var(--bl);color:var(--ng);font-family:Urbanist,'Helvetica Neue',Helvetica,Arial,sans-serif;
 font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1300px;margin:0 auto;padding:0 22px}

nav{position:sticky;top:0;z-index:20;background:var(--bl);border-bottom:1px solid var(--gl);
 display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 22px;flex-wrap:wrap}
.id{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14px;letter-spacing:.14em}
.id svg{width:24px;height:22px}
.mn{display:flex;gap:26px;flex-wrap:wrap}
.mn a{font-size:13.5px;font-weight:500}
.mn a span{display:block;font-weight:400;font-size:11.5px;color:var(--g2)}
.mn a:hover{color:var(--rj)}

.hero{position:relative;height:74vh;min-height:480px;overflow:hidden;background:#000}
.hero img{width:100%;height:100%;object-fit:cover;opacity:.82}
.hero-t{position:absolute;left:0;right:0;bottom:0;padding:0 22px 46px;
 background:linear-gradient(to top,rgba(0,0,0,.82),transparent);color:#fff}
.hero-in{max-width:1300px;margin:0 auto}
.hero h1{font-size:clamp(30px,5.4vw,62px);font-weight:500;line-height:1.02;margin:0 0 12px;
 letter-spacing:-.028em;max-width:17ch}
.hero p{margin:0;font-size:17px;max-width:50ch;opacity:.9}

.bloques{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-bottom:1px solid var(--gl)}
.bq{padding:44px 30px 48px;border-right:1px solid var(--gl);display:flex;flex-direction:column;gap:11px}
.bq:last-child{border-right:none}
.bq:hover{background:#FFFFFF}
.bq-r{font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--rj)}
.bq-s{font-size:12px;color:var(--g2);margin:-8px 0 0}
.bq h2{font-size:25px;font-weight:500;margin:4px 0 0;letter-spacing:-.02em;line-height:1.15}
.bq p{margin:0;color:var(--g1);font-size:15px;flex:1}
.bq b{font-weight:500;font-size:14px;border-bottom:2px solid var(--ng);align-self:flex-start;padding-bottom:1px}
.bq:hover b{border-bottom-color:var(--rj);color:var(--rj)}

section{padding:64px 0;border-bottom:1px solid var(--gl)}
.st{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--g2);margin:0 0 22px}
h2.sec{font-size:clamp(26px,3.6vw,40px);font-weight:500;letter-spacing:-.025em;margin:0 0 30px}

.serv{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--gl);
 border:1px solid var(--gl)}
.sv{background:var(--bl);padding:24px 22px}
.sv h3{font-size:17px;font-weight:500;margin:0 0 6px;letter-spacing:-.01em}
.sv p{margin:0;color:var(--g1);font-size:13.5px}

.filtros{display:flex;gap:20px;margin-bottom:22px}
.filtro{font:inherit;background:none;border:none;padding:0 0 3px;cursor:pointer;color:var(--g2);
 font-size:13.5px;font-weight:500;border-bottom:2px solid transparent}
.filtro[aria-pressed="true"]{color:var(--ng);border-bottom-color:var(--ng)}
.filtro:focus-visible{outline:2px solid var(--rj);outline-offset:2px}
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:34px 24px}
.ob-i{aspect-ratio:16/11;overflow:hidden;background:#000;margin-bottom:12px}
.ob-i img{width:100%;height:100%;object-fit:cover;transition:transform .55s}
.ob:hover .ob-i img{transform:scale(1.045)}
.vac{width:100%;height:100%;background:var(--gl)}
.ob-m{font-size:12px;color:var(--g2);margin-bottom:4px}
.ob h3{font-size:18px;font-weight:500;margin:0 0 4px;letter-spacing:-.012em}
.ob:hover h3{color:var(--rj)}
.ob p{margin:0;color:var(--g1);font-size:13.5px;line-height:1.45}

.est{display:grid;grid-template-columns:1.4fr 1fr;gap:50px}
.bio{font-size:19px;line-height:1.5;margin:0;color:var(--g1)}
.bio b{color:var(--ng);font-weight:500}
.gt{display:flex;flex-direction:column;gap:16px}
.pr{border-left:3px solid var(--rj);padding-left:15px}
.pr b{display:block;font-weight:500}
.pr span{color:var(--g1);font-size:13.5px}

.pie{padding:52px 0 60px}
.mail{font-size:clamp(22px,4vw,42px);font-weight:500;letter-spacing:-.03em;
 border-bottom:3px solid var(--ng);display:inline-block}
.mail:hover{color:var(--rj);border-bottom-color:var(--rj)}
.rd{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.rd a{font-size:13.5px;font-weight:500;color:var(--g1);border-bottom:1px solid var(--gl);padding-bottom:2px}
.rd a:hover{color:var(--ng);border-bottom-color:var(--ng)}
.rd a.pend::after{content:" ·";color:var(--rj)}
footer{border-top:1px solid var(--gl);padding:20px 0;font-size:11.5px;color:var(--g2)}

@media (max-width:900px){.bloques{grid-template-columns:1fr}.bq{border-right:none;border-bottom:1px solid var(--gl)}
 .est{grid-template-columns:1fr;gap:28px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* carril de obras destacadas · Biblia de Arte, rejilla de dos por dos */
.carril{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#2C2C2C;
  border-top:1px solid #2C2C2C;border-bottom:1px solid #2C2C2C;
  /* A sangre. El carril es un <section> y algunas versiones le dan a ese
     elemento padding y ancho maximo, que aqui dejarian la rejilla flotando
     dentro de una caja. Se anulan los tres. */
  padding:0;max-width:none;margin:0}
.carril a{display:block;position:relative;overflow:hidden;background:#000000;text-decoration:none}
.carril img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;display:block}
.carril .cr-t{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,0));
  color:#FFFFFF;font-weight:500;font-size:13px;letter-spacing:.03em}
.carril .cr-a{color:#AAAAAA;font-weight:300;margin-left:8px}
@media(max-width:700px){.carril{grid-template-columns:1fr}}

/* ficha de obra */
.of-h{position:relative;height:62vh;min-height:380px;overflow:hidden;background:#000}
.of-h img{width:100%;height:100%;object-fit:cover;opacity:.85}
.of-h .hero-t h1{max-width:22ch}
.of-c{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;padding:56px 0;border-bottom:1px solid var(--gl)}
.of-tx p{margin:0 0 1em;font-size:18px;line-height:1.6;color:var(--g1);max-width:62ch}
.of-tx p:first-child{color:var(--ng)}
.of-f{margin:0;display:grid;gap:18px;align-content:start}
.of-f div{border-left:3px solid var(--rj);padding-left:15px}
.of-f dt{font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--g2)}
.of-f dd{margin:2px 0 0;font-size:15px}
.of-v{padding:56px 0 0}
.of-v .mv{position:relative;aspect-ratio:16/9;background:#000}
.of-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.of-g{padding:56px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px}
.of-g a{display:block;background:#000;overflow:hidden}
.of-g img{width:100%;height:auto}
.of-n{display:flex;justify-content:space-between;gap:20px;padding:30px 0;border-bottom:1px solid var(--gl);flex-wrap:wrap}
.of-n a{font-weight:500;font-size:15px}
.of-n a span{display:block;font-weight:400;font-size:12px;color:var(--g2)}
.of-n a:hover{color:var(--rj)}
.bq a.cta{font-weight:500;font-size:14px;border-bottom:2px solid var(--ng);align-self:flex-start;padding-bottom:1px}
.bq a.cta:hover{border-bottom-color:var(--rj);color:var(--rj)}
.id:hover{color:var(--rj)}
a:focus-visible,button:focus-visible{outline:2px solid var(--rj);outline-offset:3px}
.e404{padding:120px 0}
@media (max-width:900px){.of-c{grid-template-columns:1fr;gap:32px}.of-g{grid-template-columns:1fr}}
/* en el telefono el menu fijo se comia un quinto de la pantalla */
@media (max-width:700px){nav{padding:10px 16px;gap:8px}.mn{gap:6px 18px}.mn a{font-size:13px}.mn a span{display:none}
 .wrap{padding:0 16px}.hero-t{padding:0 16px 34px}}