:root{--bg:#0e0e0d;--s1:#151413;--s2:#1b1a18;--s3:#1f1e1c;--s4:#2a2926;
--line:#232220;--line-soft:#1b1a18;--ctrl:#2e2d2a;
--ink:#f2f0eb;--ink2:#e4e1da;--body:#c6c1b8;--mut:#9a958d;--mut2:#8d8880;--mut3:#7d786f;--off:#6b665f;
--acc:oklch(0.72 0.09 84);--acc-h:oklch(0.78 0.1 84);--acc-b:oklch(0.8 0.1 84);
--ph:repeating-linear-gradient(135deg,#1f1e1c 0 8px,#181715 8px 16px);
--ph-hero:repeating-linear-gradient(135deg,#1a1917 0 8px,#141312 8px 16px);
--sans:Archivo,Helvetica,Arial,sans-serif;--mono:"IBM Plex Mono",monospace;
--pad:clamp(20px,4vw,40px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:hover{color:var(--acc-h)}
::selection{background:var(--acc);color:#0e0e0d}
input,textarea,button,select{font:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;text-wrap:pretty}
p,li,blockquote{text-wrap:pretty}
/* etiqueta mono: la firma tipografica del sitio */
.k{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:0}
.m{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut3)}
.acc{color:var(--acc)}
/* header */
header.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:18px 28px;background:rgba(14,14,13,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--mono);font-size:13px;letter-spacing:.36em;text-transform:uppercase;color:var(--ink)}
nav.n{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
nav.n a{padding:8px 12px;color:var(--mut);border-bottom:1px solid transparent}
nav.n a:hover{color:var(--ink)}nav.n a[aria-current]{border-bottom-color:var(--acc);color:var(--ink)}
nav.n .sep{width:1px;background:var(--ctrl);margin:6px 8px}
nav.n a.priv{color:var(--mut3);border:1px solid var(--ctrl)}
/* estructura */
.page{padding:clamp(28px,5vw,56px) var(--pad) 80px}
.h1{margin:0 0 20px;font-size:clamp(38px,6vw,68px);line-height:.98;letter-spacing:-.035em;max-width:22ch}
.intro{margin:0 0 48px;max-width:60ch;font-size:19px;line-height:1.6;color:var(--body)}
.lead{font-size:17px;line-height:1.6;color:var(--body)}
.filas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px}
.sec{padding:0 var(--pad) 72px}
.sec-linea{border-top:1px solid var(--line);padding:72px var(--pad);margin-top:4px}
/* botones */
.btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:14px 22px;border:0;cursor:pointer}
.btn.claro{background:var(--ink);color:#0e0e0d}.btn.claro:hover{background:var(--acc);color:#0e0e0d}
.btn.acento{background:var(--acc);color:#0e0e0d}.btn.acento:hover{background:var(--acc-b);color:#0e0e0d}
.btn.negro{background:#0e0e0d;color:var(--ink)}.btn.negro:hover{background:var(--s4);color:var(--ink)}
.btn.linea{border:1px solid var(--ctrl);color:var(--body)}.btn.linea:hover{border-color:var(--acc);color:var(--ink)}
/* hero */
.hero{position:relative;min-height:min(78vh,620px);background:var(--ph-hero);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,4vw,44px);overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(14,14,13,.93) 0%,rgba(14,14,13,.5) 45%,rgba(14,14,13,.18) 100%)}
.hero>*:not(img){position:relative;z-index:1}
.hero h1{margin:0;font-size:clamp(44px,8vw,92px);line-height:.92;letter-spacing:-.04em;max-width:16ch}
.hero .cap{position:absolute;top:18px;right:20px;z-index:2}
/* mosaico de series */
.mosaico{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));grid-auto-rows:220px;gap:4px;padding:0 4px}
.mosaico a{position:relative;min-width:0;background:var(--ph);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;overflow:hidden}
.mosaico a:hover{outline:1px solid var(--acc)}
.mosaico a>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* La celda lleva imagen REAL debajo del texto: el velo tiene que aguantar tambien una
   foto clara (KIBi es casi blanca) o el titulo se pierde. */
.mosaico a::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(14,14,13,.94) 0%,rgba(14,14,13,.72) 32%,rgba(14,14,13,.28) 72%,rgba(14,14,13,.12) 100%)}
.mosaico a>span{position:relative;z-index:1}
.mosaico .t{font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-.02em;margin-top:6px;color:var(--ink)}
.mosaico .t.chico{font-size:23px}
.mosaico .g2{grid-column:span 2}.mosaico .g4{grid-column:span 2;grid-row:span 2}
/* banda de convocatoria: el UNICO bloque de acento del sitio */
.banda{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;margin:4px 4px 0;padding:32px clamp(20px,4vw,36px);background:var(--acc);color:#0e0e0d}
.banda p{margin:0}
.banda .est{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.banda .tit{font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:-.02em;max-width:34ch}
.banda a:hover{color:var(--ink)}
/* rejillas */
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,5vw,56px)}
.dos>*{min-width:0}
.dos.junta{gap:4px}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px}
.tarjetas a,.tarjetas .bloque{padding:26px;background:var(--s1);min-width:0;display:block}
.tarjetas a:hover{background:#1c1b19}
.tarjetas .tt{margin:0;font-size:19px;line-height:1.35;font-weight:500;color:var(--ink)}
.bases{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px}
.bases .bloque{padding:28px;background:var(--s1);min-width:0}
.bases .bloque p{margin:0;font-size:17px;line-height:1.6;color:var(--ink2)}
.bases .bloque .m{display:block;margin-bottom:12px;letter-spacing:.14em}
.cuadros{display:grid;grid-template-columns:1fr 1fr;gap:4px;min-width:0}
.cuadros img{aspect-ratio:1;object-fit:cover;width:100%;background:var(--ph)}
/* piezas (rejilla de fotos) */
.piezas{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px}
.piezas a,.piezas figure{position:relative;margin:0;aspect-ratio:4/5;min-width:0;background:var(--ph);display:flex;align-items:flex-end;padding:12px;overflow:hidden}
.piezas a:hover,.piezas figure:hover{outline:1px solid var(--acc)}
.piezas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.piezas figcaption,.piezas .cap{position:relative;z-index:1;font-family:var(--mono);font-size:10px;letter-spacing:.06em;line-height:1.4;color:var(--ink2);text-shadow:0 1px 8px rgba(14,14,13,.95)}
.piezas.ancha{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
/* chips / filtros */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.chips a,.chips button{padding:10px 16px;border:1px solid var(--ctrl);color:var(--body);background:transparent;cursor:pointer}
.chips a:hover,.chips button:hover{border-color:var(--acc);color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--s3);color:var(--ink)}
/* indice de blog */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll>.ancho{min-width:560px}
.fila{display:grid;grid-template-columns:120px minmax(0,1fr) 110px;gap:24px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.fila:hover{background:var(--s1)}
.fila .tt{display:block;font-size:22px;font-weight:500;line-height:1.3;color:var(--ink)}
.fila .rs{display:block;margin-top:8px;font-size:16px;line-height:1.55;color:var(--mut)}
.fila .cat{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);text-align:right}
.destacada{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:4px;margin-bottom:40px}
.destacada:hover{opacity:.85}
.destacada .foto{position:relative;aspect-ratio:16/10;min-width:0;background:var(--ph);display:flex;align-items:flex-end;padding:14px;overflow:hidden}
.destacada .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.destacada .txt{padding:clamp(20px,3vw,36px);background:var(--s1);display:flex;flex-direction:column;justify-content:center;min-width:0}
.destacada h2{margin:0 0 14px;font-size:clamp(24px,3.4vw,34px);line-height:1.15;letter-spacing:-.025em}
/* formularios */
form.f{display:flex;flex-direction:column;gap:12px;min-width:0}
form.f input,form.f textarea,form.f select{padding:14px 16px;background:var(--s1);border:1px solid var(--ctrl);color:var(--ink);outline:none;width:100%}
form.f textarea{resize:vertical}
form.f input:focus,form.f textarea:focus,form.f select:focus{border-color:var(--acc)}
form.f label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut3);margin-bottom:-6px}
form.f label.chk{display:flex;gap:10px;align-items:flex-start;font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none;color:var(--body);margin:0}
form.f label.chk input{width:auto;margin-top:5px}
form.f .nota{margin:0;font-family:var(--mono);font-size:10px;line-height:1.7;color:var(--mut3)}
/* articulo */
article.post{max-width:720px;margin:0 auto;padding:clamp(28px,5vw,56px) 0 72px}
article.post h1{font-size:clamp(32px,5vw,52px);line-height:1;letter-spacing:-.035em;margin:0 0 24px;max-width:24ch}
article.post .body{font-size:17px;line-height:1.7;color:var(--body)}
article.post .body h2{margin:1.8em 0 .5em;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
article.post .body h3{margin:1.5em 0 .4em;font-size:20px;color:var(--ink)}
article.post .body img{margin:1.8em auto;width:100%}
article.post .body strong{color:var(--ink2)}
article.post .body a{border-bottom:1px solid var(--ctrl)}
figure.duo{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:1.6em 0 2em}
figure.duo img{margin:0!important;width:100%}
figure.duo figcaption{grid-column:1/-1;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mut3);text-align:center}
blockquote{border-left:1px solid var(--acc);margin:1.6em 0;padding:.2em 0 .2em 1.2em;font-size:22px;line-height:1.5;color:var(--ink2)}
/* FAQ */
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq summary{font-size:19px;font-weight:500;cursor:pointer;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--acc);font-family:var(--mono)}
.faq details[open] summary::before{content:"- "}
.faq p{color:var(--body);max-width:62ch;font-size:17px}
/* nota / declaracion */
.nota-acc{border-left:1px solid var(--acc);padding:.2em 0 .2em 1.1em;color:var(--body);max-width:62ch;font-size:16px}
/* landing larga */
.landing{max-width:820px;margin:0 auto}
.landing h2{margin:1.6em 0 .5em;font-size:26px;letter-spacing:-.02em}
.landing p,.landing li{color:var(--body);font-size:17px;line-height:1.7}
.landing li{margin:.4em 0}
/* tira de proyectos: nota al pie de la portada, nunca una seccion */
.pro-pie{border-top:1px solid var(--line);padding:36px var(--pad) 8px}
.pro-pie .k{margin-bottom:12px}
.pro-pie .tira{margin:0 0 10px;font-size:14px;line-height:2;color:var(--body)}
.pro-pie .tira a{border-bottom:1px solid var(--ctrl)}
.pro-pie .tira a:hover{border-bottom-color:var(--acc)}
.pro-pie .tira span{color:var(--off);margin:0 2px}
.pro-pie .mini{margin:0;font-size:13px;line-height:1.6;color:var(--mut3);max-width:70ch}
/* footer */
footer.pie{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;align-items:end;padding:64px var(--pad);border-top:1px solid var(--line)}
footer.pie>div{min-width:0}
/* El handoff fija clamp(28,4.5vw,52) para el correo del pie, pero su ejemplo era
   hola@piloko.com (15 caracteres) y el real tiene 19: a ese tamano se partia a media
   palabra («contacto@pil / oko.com»). Se baja el maximo hasta que CABE en la columna de
   374px que deja la rejilla del pie, medido en el navegador a 1280px. */
footer.pie .grande{font-size:clamp(20px,2.6vw,33px);font-weight:600;letter-spacing:-.03em;line-height:1.05;overflow-wrap:break-word;word-break:normal;color:var(--ink)}
footer.pie .cols{display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
footer.pie .cols.tenue{color:var(--mut3)}
:focus-visible{outline:1px solid var(--acc);outline-offset:2px}
@media(max-width:760px){.fila{grid-template-columns:1fr;gap:8px}.fila .cat{text-align:left}
.mosaico .g4,.mosaico .g2{grid-column:span 1;grid-row:span 1}}