:root{
  --k:#000;            /* negro de tinta */
  --paper:#E6EAEA;     /* papel frío */
  --mute:#93A0A3;      /* gris plata */
  --cyan:#00A3E0;      /* tinta cian de proceso */
  --line:rgba(230,234,234,.18);
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --pad:clamp(20px,4vw,56px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--k);color:var(--paper);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:8px;z-index:20;background:var(--cyan);color:var(--k);padding:8px 12px}

/* cabecera */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;padding:14px var(--pad);background:rgba(0,0,0,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-stretch:112%;text-decoration:none;font-size:17px;white-space:nowrap}
.brand span{font-weight:400;color:var(--mute)}
.top nav{display:flex;gap:22px;margin-left:auto;font-size:15px}
.top nav a{text-decoration:none;color:var(--mute)}
.top nav a:hover{color:var(--paper)}
.cta{background:var(--cyan);color:var(--k);text-decoration:none;font-weight:600;font-size:15px;padding:9px 16px;white-space:nowrap}
.cta:hover{color:var(--k);background:var(--paper)}
@media (max-width:860px){.top nav{display:none}.cta{margin-left:auto}.brand span{display:none}}
@media (min-width:761px) and (max-width:860px){.top nav{display:none}}

/* hero: el nombre como esténcil de serigrafía */
.hero{padding:clamp(18px,3vw,36px) var(--pad) 0}
.stencil{position:relative;overflow:hidden;background:var(--k)}
.stencil-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stencil-mask{position:relative;background:var(--k);color:#fff;mix-blend-mode:multiply;font-family:var(--sans);font-weight:800;font-stretch:125%;font-size:24vw;line-height:.78;letter-spacing:-.035em;padding:.06em 0 .02em;white-space:nowrap;text-align:left}
.stencil-mask span{display:inline-block;margin-left:-.04em}
.hero-text{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:28px 0 0;align-items:start;max-width:60rem}
.hero h1{font-size:clamp(20px,1.8vw,24px);font-weight:600;font-stretch:112%;grid-column:1}
.claim{font-family:var(--serif);font-size:clamp(34px,4.6vw,64px);line-height:1.04;letter-spacing:-.01em;max-width:13ch}
.lede{max-width:44ch;color:var(--paper);font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);line-height:1.4;padding-top:6px}
.hero-links{display:flex;gap:24px;font-weight:600;padding-top:8px}
.hero-note{margin-top:28px;font-size:13px;color:var(--mute);padding-bottom:clamp(48px,7vw,96px);border-bottom:1px solid var(--line)}


/* secciones */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px 48px;padding:clamp(56px,8vw,112px) var(--pad) 32px}
.sec-head h2,.taller-text h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.4vw,76px);line-height:1;letter-spacing:-.015em}
.sec-head p{max-width:52ch;color:var(--mute);align-self:end}
@media (max-width:760px){.sec-head{grid-template-columns:1fr}}

/* lista de trabajos */
.works{border-top:1px solid var(--line)}
.work{border-bottom:1px solid var(--line)}
.work summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,.55fr) auto;gap:8px 32px;align-items:baseline;padding:22px var(--pad)}
.work summary::-webkit-details-marker{display:none}
.work h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.05;transition:color .2s}
.work summary:hover h3,.work[open] h3{color:var(--cyan)}
.w-tec{color:var(--paper)}
.w-rol{color:var(--mute)}
.w-rol-p::before{content:"";display:inline-block;width:.62em;height:.62em;background:var(--cyan);margin-right:.5em;vertical-align:.02em}
.w-rol-o::before{content:"";display:inline-block;width:.62em;height:.62em;border:1.5px solid var(--paper);margin-right:.5em;vertical-align:.02em}
.w-n{color:var(--mute);font-size:14px;font-variant-numeric:tabular-nums}
@media (max-width:860px){.work summary{grid-template-columns:1fr auto}.work h3{grid-column:1 / -1}.w-tec{grid-column:1 / -1}.w-n{display:none}}

.w-body{padding:0 0 36px}
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 14px;scroll-padding-inline:var(--pad);scrollbar-color:var(--mute) transparent}
.strip figure{flex:0 0 auto;scroll-snap-align:start}
.strip img{height:min(62vh,620px);width:auto;max-width:none;background:#0d1214}
.strip figcaption{font-size:13px;color:var(--mute);margin-top:8px;max-width:48ch}
@media (max-width:760px){.strip img{height:auto;width:82vw}}
.w-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px 48px;padding:18px var(--pad) 0}
.w-info p{font-family:var(--serif);font-size:clamp(19px,1.6vw,22px);line-height:1.45;max-width:46ch}
.w-info dl{display:grid;gap:10px;align-content:start}
.w-info dl div{display:grid;grid-template-columns:8.5em 1fr;gap:12px;border-top:1px solid var(--line);padding-top:10px}
.w-info dt{color:var(--mute)}
.w-close{grid-column:1;justify-self:start;background:none;border:1px solid var(--line);color:var(--paper);font:inherit;font-size:15px;padding:8px 14px;cursor:pointer}
.w-close:hover{border-color:var(--cyan);color:var(--cyan)}
@media (max-width:760px){.w-info{grid-template-columns:1fr}.w-info dl div{grid-template-columns:1fr}}

/* servicios */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.svc-grid article{padding:28px var(--pad) 32px 0;border-right:1px solid var(--line);padding-left:24px}
.svc-grid article:first-child{padding-left:var(--pad)}
.svc-grid article:last-child{border-right:0}
.svc-grid h3{font-weight:700;font-stretch:125%;font-size:clamp(26px,2.4vw,34px);margin-bottom:12px}
.svc-grid p{max-width:36ch}
.svc-ref{margin-top:14px;color:var(--mute);font-size:15px}
@media (max-width:980px){.svc-grid{grid-template-columns:1fr 1fr}.svc-grid article{padding-left:var(--pad);border-bottom:1px solid var(--line)}.svc-grid article:nth-child(2n){border-right:0}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}.svc-grid article{border-right:0}}
.process{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:20px 48px;padding:56px var(--pad) 0}
.process h3{font-family:var(--serif);font-weight:400;font-size:28px}
.process ol{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.process li{counter-increment:p;border-top:2px solid var(--cyan);padding-top:12px;color:var(--mute)}
.process li::before{content:counter(p);display:block;font-weight:700;font-stretch:125%;font-size:32px;color:var(--paper);margin-bottom:6px}
.process strong{color:var(--paper);font-weight:600}
@media (max-width:860px){.process{grid-template-columns:1fr}.process ol{grid-template-columns:1fr 1fr}}

/* taller */
.taller{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;padding:clamp(72px,10vw,140px) var(--pad) 0;align-items:start}
.taller-img img{width:100%;height:auto}
.taller-text h2{margin-bottom:28px}
.taller-text>p{font-family:var(--serif);font-size:clamp(19px,1.6vw,22px);line-height:1.45;max-width:46ch;margin-bottom:16px}
.who{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.who h3{font-size:15px;font-weight:600;color:var(--mute);margin-bottom:6px}
@media (max-width:760px){.taller,.who{grid-template-columns:1fr}}

/* contacto */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;padding:clamp(72px,10vw,140px) var(--pad);margin-top:clamp(72px,10vw,140px);border-top:1px solid var(--line)}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.4vw,62px);line-height:1.04;max-width:14ch;margin-bottom:20px}
.contact-head>p{color:var(--mute);max-width:42ch}
address{font-style:normal;margin-top:28px;display:grid;gap:6px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;align-content:start}
.form label{display:grid;gap:6px;font-size:15px;color:var(--mute)}
.form .full{grid-column:1 / -1}
.form input,.form select,.form textarea{font:inherit;color:var(--paper);background:transparent;border:0;border-bottom:1px solid var(--mute);padding:8px 0;border-radius:0}
.form select option{background:var(--k)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--cyan)}
.form button{grid-column:1 / -1;justify-self:start;background:var(--cyan);color:var(--k);border:0;font:inherit;font-weight:600;padding:12px 22px;cursor:pointer}
.form button:hover{background:var(--paper)}
.hp{position:absolute;left:-9999px}
.form .opt{color:var(--mute);font-size:13px}
.form ::placeholder{color:#5f6b6e}
.form-note{font-size:14px;color:var(--mute)}
@media (max-width:760px){.contact,.form{grid-template-columns:1fr}}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px var(--pad) 40px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}

/* ===== destacados: tres proyectos, composición asimétrica ===== */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.featured{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto auto;gap:14px;padding:clamp(40px,6vw,80px) var(--pad) 0}
.feat{position:relative;display:block;overflow:hidden;text-decoration:none;color:var(--paper);background:#0d1214}
.feat img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.feat:hover img{transform:scale(1.03)}
.feat:hover{color:var(--paper)}
.feat-a{grid-row:1 / span 2}
.feat-b,.feat-c{aspect-ratio:16/10}
.feat-t,.feat-d{position:absolute;left:18px;right:18px}
.feat-t{bottom:40px;font-family:var(--serif);font-size:clamp(24px,2.6vw,38px);line-height:1.05;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.feat-d{bottom:16px;font-size:14px;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.feat::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none}
.feat-t,.feat-d{z-index:1}
@media (prefers-reduced-motion:reduce){.feat img{transition:none}}
@media (max-width:860px){.featured{grid-template-columns:1fr}.feat-a{grid-row:auto;aspect-ratio:4/3}}
.feat-a img{position:absolute;inset:0}

/* ===== filtro ===== */
.filter{display:flex;gap:6px;padding:clamp(48px,7vw,96px) var(--pad) 0}
.filter button{font:inherit;font-size:15px;background:none;color:var(--mute);border:1px solid var(--line);padding:7px 14px;cursor:pointer}
.filter button[aria-pressed="true"]{color:var(--k);background:var(--paper);border-color:var(--paper)}
.filter button:hover{color:var(--paper);border-color:var(--paper)}
.filter button[aria-pressed="true"]:hover{color:var(--k)}
.filter + .works-sec .sec-head{padding-top:28px}
.works-sec[hidden]{display:none}

/* ===== obra: tratamiento invertido, papel y tinta ===== */
.works-sec.obra{--paper:#0a0a0a;--k:#E6EAEA;--mute:#4b5558;--line:rgba(0,0,0,.2);--cyan:#00719B;background:#E6EAEA;color:#0a0a0a;margin-top:clamp(56px,8vw,112px);padding-bottom:clamp(48px,7vw,96px)}
.works-sec.obra .work h3{font-style:italic}
.works-sec.obra .strip img{background:#d5dada}
.works-sec.obra .strip{scrollbar-color:#4b5558 transparent}
.w-rel{grid-column:2;font-size:15px;color:var(--mute)}
@media (max-width:760px){.w-rel{grid-column:1}}

/* ===== móvil: CYAN en dos líneas para que el video se vea grande ===== */
.stencil-mask b{font-weight:inherit}
@media (max-width:760px){
  .stencil-mask{line-height:.8;padding:.05em 0 .04em}
  .stencil-mask b{display:block}
  .top{flex-wrap:wrap;row-gap:10px}
  .top nav{display:flex;order:3;width:100%;gap:18px;overflow-x:auto;margin-left:0;font-size:14px;scrollbar-width:none;padding-bottom:2px}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{white-space:nowrap}
}