/* Archivo (SIL Open Font License, ver fonts/OFL.txt), alojada en el sitio para no conectar con Google. */
@font-face {font-family: 'Archivo';font-style: italic;font-weight: 100 900;font-stretch: 62% 125%;font-display: swap;src: url(/fonts/archivo-italic-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Archivo';font-style: italic;font-weight: 100 900;font-stretch: 62% 125%;font-display: swap;src: url(/fonts/archivo-italic-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Archivo';font-style: normal;font-weight: 100 900;font-stretch: 62% 125%;font-display: swap;src: url(/fonts/archivo-normal-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Archivo';font-style: normal;font-weight: 100 900;font-stretch: 62% 125%;font-display: swap;src: url(/fonts/archivo-normal-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{--paper:#fff;--ink:#000;--graphite:#686868;--rule:#dcdcdc;--red:#f70414;--yellow:#fce102;--blue:#045395;--u:var(--red);color-scheme:light;--f:"Archivo",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.55}
html[data-lang="es"] [lang="en"],html[data-lang="en"] [lang="es"]{display:none}
img{max-width:100%;height:auto;display:block}
/* Subrayados en rojo, amarillo y azul, como la pintura de Abrazos. Cada enlace elige el suyo con --u. */
a{color:inherit;text-decoration-color:var(--u);text-underline-offset:.2em;text-decoration-thickness:2px}
a:hover{text-decoration-thickness:4px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
button{font:inherit;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
[hidden]{display:none!important}

/* header */
header.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--paper);border-bottom:1px solid var(--rule)}
header.bar .wrap{display:flex;align-items:center;gap:24px;min-height:56px;flex-wrap:wrap}
.mark{font-weight:900;font-size:15px;text-decoration:none;white-space:nowrap}
.mark span{font-weight:200;letter-spacing:.35em;margin-left:.3em}
nav.main{display:flex;gap:22px;margin-left:auto;font-size:15px}
nav.main a{text-decoration:none;padding:4px 0;border-bottom:3px solid transparent}
nav.main a:nth-child(3n+2){--u:var(--yellow)}
nav.main a:nth-child(3n){--u:var(--blue)}
nav.main a:hover,nav.main a[aria-current="page"]{border-bottom-color:var(--u)}
.lang{font-size:13px;background:none;border:1px solid var(--ink);padding:4px 9px;border-radius:999px;cursor:pointer}
@media (max-width:760px){
  header.bar .wrap{gap:0 12px;padding-top:10px}
  .lang{margin-left:auto}
  nav.main{order:3;width:100%;margin:0;justify-content:space-between;padding:8px 0 10px;font-size:14px}
}

/* home */
/* slideshow de portada: ocupa justo la pantalla bajo la barra (--bar lo mide main.js), con la firma bajo la línea */
.show{display:flex;flex-direction:column;height:calc(100svh - var(--bar,57px));min-height:420px}
.stage{flex:1;min-height:0;width:100%;display:flex;padding-top:clamp(20px,3vw,40px);padding-bottom:clamp(16px,2vw,28px)}
.slides{flex:1;position:relative}
.slide{position:absolute;inset:0;display:flex;opacity:0;visibility:hidden;transition:opacity 1.2s,visibility 1.2s}
.slide.on{opacity:1;visibility:visible}
.slide img{width:100%;height:100%;object-fit:contain}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;background:none;color:#fff;mix-blend-mode:difference;cursor:pointer}
.arrow.prev{left:0}
.arrow.next{right:0}
/* Sin fondo: el modo difference las muestra negras sobre claro y blancas sobre oscuro. */
.arrow svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.prev:hover svg{transform:translateX(-4px)}
.next:hover svg{transform:translateX(4px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sigline{border-top:1px solid var(--rule)}
.sigline .wrap{display:flex;justify-content:flex-end;padding-top:12px;padding-bottom:12px}
.sigline .sig{width:30px}
.show + .band{border-top:0}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}
@media (max-width:760px){.arrow{width:40px;height:40px}.sigline .sig{width:24px}}
.band{border-top:1px solid var(--ink);padding:clamp(40px,6vw,80px) 0}
.bandhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(24px,3vw,40px)}
h2{margin:0;font-weight:800;font-size:clamp(34px,5.4vw,64px);line-height:1;letter-spacing:-.015em;font-variation-settings:"wdth" 108}
.more{font-size:15px;white-space:nowrap;--u:var(--blue)}

/* gallery */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,3vw,40px)}
.chip{background:none;border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font-size:14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* En celular, los filtros van en una fila que se desliza y llega hasta los bordes de la pantalla. */
@media (max-width:760px){.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1*clamp(18px,4vw,48px));margin-right:calc(-1*clamp(18px,4vw,48px));padding:0 clamp(18px,4vw,48px)}.filters::-webkit-scrollbar{display:none}.chip{flex:none;white-space:nowrap}}
.intro{max-width:60ch;margin:-8px 0 28px;color:var(--graphite)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(20px,2.4vw,32px) clamp(14px,2vw,24px)}
@media (max-width:560px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{display:block;text-decoration:none}
.card .ph{position:relative;overflow:hidden;background:#fff}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.card.x .ph img{filter:blur(24px);transform:scale(1.08)}
html.adult-ok .card.x .ph img{filter:none;transform:none}
.card .ph .veil{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:600;color:#000}
html.adult-ok .card .veil{display:none}
.card .t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:10px;font-size:14px;line-height:1.35}
.card .t b{font-weight:600}
.card .t .meta{color:var(--graphite)}
.tag{display:inline-block;font-size:12px;line-height:1;padding:5px 8px;border-radius:999px;white-space:nowrap;align-self:flex-start}
.tag.orig{background:var(--yellow);color:var(--ink)}
.tag.dig{border:1px solid var(--ink)}
/* Vendido: el punto rojo de las galerías de arte. */
.tag.sold{border:1px solid var(--rule);color:var(--graphite)}
.tag.sold::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--red);vertical-align:0}
.card:hover .t b{text-decoration:underline 3px var(--yellow);text-underline-offset:.2em}
.empty{color:var(--graphite)}

/* work detail */
.work{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,88px)}
.work .imgs{display:grid;gap:14px}
.work .imgs img{width:100%;background:#fff}
.work .imgs figure{margin:0}
.work .imgs video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.work .imgs figcaption{margin-top:8px;font-size:14px;color:var(--graphite)}
.work.x .imgs img{filter:blur(28px)}
html.adult-ok .work.x .imgs img{filter:none}
.work aside{align-self:start;position:sticky;top:90px}
.back{font-size:14px;display:inline-block;margin-bottom:18px}
.work h1{margin:0 0 6px;font-weight:800;font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.01em}
.work .series{color:var(--graphite);margin:0 0 24px}
dl.ficha{margin:0 0 24px;display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--rule)}
dl.ficha dt,dl.ficha dd{margin:0;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
dl.ficha dt{color:var(--graphite);padding-right:24px}
.work .desc{margin:0 0 24px;max-width:48ch}
.cta{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;padding:12px 18px;font-weight:600;font-size:15px}
.cta:hover{color:var(--paper);background:var(--blue)}
.pn{display:flex;justify-content:space-between;margin-top:32px;font-size:14px}
.pn a:last-child{--u:var(--blue)}
@media (max-width:760px){.work{grid-template-columns:1fr}.work aside{position:static}}
.gate{border:1px solid var(--rule);padding:18px;margin:0 0 20px;font-size:15px}
.gate p{margin:0 0 12px}
.btn{background:var(--ink);color:var(--paper);border:0;padding:10px 16px;font-weight:600;font-size:14px;cursor:pointer}
html.adult-ok .gate,html.adult-ok #adultchip{display:none}

/* about */
.about{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.about img{width:100%;max-width:260px;filter:grayscale(1)}
.statement{max-width:64ch;font-size:clamp(18px,1.6vw,20px);line-height:1.6}
.statement p{margin:0 0 1em}
.statement .close{font-style:italic}
h3{font-size:22px;font-weight:700;margin:48px 0 12px}
ol.cv{list-style:none;padding:0;margin:0;max-width:820px}
ol.cv li{display:grid;grid-template-columns:7em 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
ol.cv time{font-variant-numeric:tabular-nums;color:var(--graphite)}
@media (max-width:760px){.about{grid-template-columns:1fr}.about img{max-width:180px}}

/* contact */
.contact{padding-top:clamp(40px,7vw,100px);padding-bottom:clamp(40px,7vw,100px)}
.contact .big{display:block;font-size:clamp(24px,4.4vw,52px);font-weight:700;letter-spacing:-.01em;word-break:break-word;margin:24px 0}
.contact li:nth-child(1) a{--u:var(--yellow)}
.contact li:nth-child(2) a{--u:var(--blue)}
.contact ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:18px}
.contact p{max-width:52ch;color:var(--graphite)}
footer{border-top:1px solid var(--rule);padding:28px 0 40px;font-size:13px;color:var(--graphite)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}
footer .info{display:grid;gap:6px}
footer .mail{display:inline-flex;align-items:center;gap:7px;color:var(--ink);--u:var(--blue)}
footer .mail svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
footer .sig{width:40px}
