/* Maru Domínguez · sitio. Sistema de la ronda 6 aprobada (29/10/2026).
   Escala de espaciado única: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96. Separación entre imágenes: 2 px.
   Serif: Fraunces recta en el corte de texto (opsz 26), sin itálicas; el título máximo del proyecto va en 300.
   El archivo de fuente ya trae el tamaño óptico fijado en 26 (scripts/fuentes.py). */
@font-face{font-family:"Fraunces";src:url(/fuentes/fraunces-26.woff2) format("woff2");font-weight:300 340;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2190,U+2192,U+2212}
@font-face{font-family:"Fraunces";src:url(/fuentes/fraunces-26-ext.woff2) format("woff2");font-weight:300 340;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Instrument Sans";src:url(/fuentes/instrument-sans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2190,U+2192,U+2212}
@font-face{font-family:"Instrument Sans";src:url(/fuentes/instrument-sans-ext.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Archivo";src:url(/fuentes/archivo-700-125.woff2) format("woff2");font-weight:700;font-stretch:125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fuentes/archivo-600.woff2) format("woff2");font-weight:600;font-stretch:100%;font-style:normal;font-display:swap}

:root{
  --paper:#F1EDE6; --ink:#1B1916; --ink-2:#6B655C; --rule:rgba(27,25,22,.16);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --gut:var(--s8); --col:var(--s6); --ig:2px;
  --serif:"Fraunces",Georgia,serif; --sans:"Instrument Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --tex:url(/papel.webp);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper) var(--tex) 0 0/140px 140px repeat;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:23px;-webkit-font-smoothing:antialiased;font-synthesis:none;text-rendering:optimizeLegibility;overflow-x:clip}
img,video{display:block;max-width:100%}
picture{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:0;-webkit-tap-highlight-color:transparent}
p,h1,h2,h3,ul,ol,figure{margin:0}
.wrap{padding:0 var(--gut)}
[data-nw]{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
.saltar{position:absolute;left:var(--s4);top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:var(--s2) var(--s3)}
.saltar:focus{top:var(--s4)}

/* ---------- Tipografía ---------- */
.label{font-family:var(--sans);font-size:11px;line-height:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.t15{font-size:15px;line-height:23px}
.f{font-family:var(--serif);font-optical-sizing:none;font-weight:340;font-style:normal}
.f147{font-size:147px;line-height:136px;letter-spacing:-.035em}
.f96{font-size:96px;line-height:96px;letter-spacing:-.03em}
.f62{font-size:62px;line-height:64px;letter-spacing:-.022em}
.f46{font-size:46px;line-height:48px;letter-spacing:-.016em}
.f26{font-size:26px;line-height:31px;letter-spacing:-.005em}
.f20{font-size:20px;line-height:27px;letter-spacing:0}
.pj-t{font-weight:300;line-height:.92}
.head .tt .pj-t+.f46{margin-top:calc(var(--s3) + .765625px)}
.sub{color:var(--ink-2)}

/* ---------- Cabecera del sitio ---------- */
.hdr{position:relative;display:flex;align-items:center;gap:var(--s6);height:76px;padding:0 var(--gut);border-bottom:1px solid var(--ink)}
.hdr .name{margin-right:auto;font-family:"Archivo";font-weight:700;font-stretch:125%;font-size:16px;line-height:1;letter-spacing:.012em;text-transform:uppercase}
.hdr nav{display:flex;gap:30px;align-items:center;font-family:"Archivo";font-weight:600;font-size:11.5px;line-height:1;letter-spacing:.06em;text-transform:uppercase}
.hdr nav a{position:relative;white-space:nowrap}
.hdr nav a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.hdr nav a.on:after,.hdr nav a:hover:after{transform:scaleX(1)}
.lang{position:relative;margin-left:14px;white-space:nowrap}
.lang .off{opacity:.42}
.lang .en{cursor:default}
.lang .pr{position:absolute;right:0;top:calc(100% + 10px);font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.08em;color:var(--ink-2);white-space:nowrap;opacity:0;transform:translateY(-2px);transition:opacity .2s,transform .2s;pointer-events:none}
.lang:hover .pr,.lang.ver .pr,.lang .en:focus-visible+.pr{opacity:1;transform:none}
.mtog{display:none}

/* ---------- Barra superior y cabecera editorial ---------- */
.top{display:flex;justify-content:space-between;align-items:center;padding-top:var(--s5)}
.top a:hover{color:var(--ink-2)}
.head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col);align-items:end;padding:var(--s8) 0 var(--s6)}
.head .tt{grid-column:1/span 9}
.head .tt .f46{margin-top:var(--s3)}
.head .role{grid-column:10/span 3;padding-bottom:var(--s2)}
.head .role .label{display:block;margin-bottom:var(--s2)}

/* ---------- Segmento: línea, número chico, contenido ---------- */
.seg{margin-top:var(--s8);padding-top:var(--s4);background:linear-gradient(var(--ink),var(--ink)) 0 0/100% 1px no-repeat}
.seg>.label:first-child{display:block;margin-bottom:var(--s6)}
.g12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col)}

/* ---------- Listas con barritas ---------- */
.rows{list-style:none;padding:0;background:linear-gradient(var(--rule),var(--rule)) 0 0/100% 1px no-repeat}
.rows>li{padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.rows .k{display:block;margin-bottom:var(--s1)}

/* ---------- Grilla de proyectos: 2 por fila, 2 px ---------- */
.grid2{display:grid;grid-template-columns:round(down,calc((100% - var(--ig)) / 2),2px) 1fr;gap:var(--ig);container-type:inline-size}
.card{display:block;position:relative;overflow:hidden;background:#d9d3c9;height:round(down,calc((100cqw - var(--ig)) / 2 * 9 / 16),2px)}
.card picture,.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,13,10,.72) 0%,rgba(16,13,10,.52) 16%,rgba(16,13,10,.24) 31%,rgba(16,13,10,.06) 43%,rgba(16,13,10,0) 54%)}
.veil{position:absolute;inset:0;background:rgba(16,13,10,.24);opacity:0;transition:opacity .35s var(--ease)}
.ov{position:absolute;left:var(--s5);right:var(--s5);bottom:var(--s4);display:grid;grid-template-columns:1fr auto;row-gap:var(--s2);align-items:baseline;color:#fff}
.ov .tl{grid-column:1/-1}
.ov .tl .st{color:rgba(255,255,255,.8)}
.ov .r{grid-column:1;grid-row:2;font-weight:600}
.ov .n{grid-column:2;grid-row:2;justify-self:end;transition:opacity .25s}
.ov .go{grid-column:2;grid-row:2;justify-self:end;display:flex;align-items:center;gap:var(--s3);opacity:0;transform:translateX(-6px);font-weight:600;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ln{display:inline-block;width:34px;height:1px;background:currentColor;position:relative;flex:none}
.ln:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.lnl{display:inline-block;width:34px;height:1px;background:currentColor;position:relative;flex:none}
.lnl:after{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-bottom:1px solid currentColor;border-left:1px solid currentColor;transform:rotate(45deg)}
.u{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .4s var(--ease)}
.card:hover .veil,.card.is-hover .veil{opacity:1}
.card:hover .go,.card.is-hover .go{opacity:1;transform:none}
.card:hover .n,.card.is-hover .n{opacity:0}
.card:hover .u,.card.is-hover .u{background-size:100% 1px}

/* ---------- Home ---------- */
.hero{padding:var(--s7) var(--gut) 0}
.hero h1 .dot{display:inline}
.hero-sub{display:flex;justify-content:space-between;border-top:1px solid var(--ink);margin-top:var(--s5);padding-top:var(--s3)}
.open{position:relative;margin:var(--s6) var(--gut) 0;overflow:hidden;background:#d9d3c9}
.open video,.open picture,.open img{display:block;width:100%;height:100%;object-fit:cover}
.open-pie{display:flex;justify-content:flex-end;margin:var(--s3) var(--gut) 0}
.open-pie button{display:inline-flex;align-items:center;gap:var(--s2);color:var(--ink-2)}
.open-pie button:hover{color:var(--ink)}
.doors{display:grid;grid-template-columns:1fr 1fr;margin:var(--s9) var(--gut) 0;border-top:1px solid var(--ink)}
.door{padding-top:var(--s4)}
.door+.door{border-left:1px solid var(--rule);padding-left:var(--col)}
.door .h{display:flex;justify-content:space-between;padding-right:var(--col)}
.door .f62{display:block;margin-top:var(--s8)}
.door p{margin-top:var(--s3)}
.door .go{display:inline-flex;align-items:center;gap:var(--s3);margin-top:var(--s5);opacity:0;transform:translateX(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.door:hover .go,.door:focus-visible .go{opacity:1;transform:none}
.door:hover .u{background-size:100% 1px}

/* ---------- Página de proyecto ---------- */
.player{position:relative;overflow:hidden;background:#1b1916}
.player picture,.player img,.player video{width:100%;height:100%;object-fit:cover}
.player video{position:absolute;inset:0;object-fit:contain;background:#000}
.player+.player{margin-top:var(--ig)}
.bar{position:absolute;left:0;right:0;bottom:0;height:var(--s8);background:var(--paper) var(--tex) 0 0/140px 140px repeat;display:grid;grid-template-columns:var(--s8) auto 1fr auto;align-items:center;column-gap:var(--s5);padding-right:var(--s6);transition:opacity .35s var(--ease)}
.play{width:var(--s8);height:var(--s8);background:var(--ink);display:grid;place-items:center}
.play svg{display:block}
.play .pa{display:none}
.player.on .play .pl{display:none}
.player.on .play .pa{display:block}
.track{position:relative;height:var(--s5);cursor:pointer;touch-action:none}
.track:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule)}
.track i{position:absolute;left:0;top:50%;height:1px;width:0;background:var(--ink)}
.bar .tm{display:none;font-variant-numeric:tabular-nums}
.bar .fs{display:none}
.player.ini .bar{grid-template-columns:var(--s8) auto 1fr auto auto auto}
.player.ini .tm,.player.ini .fs{display:block}
.player.ini .bar .fs:hover{color:var(--ink-2)}
.player.ini.on.calma .bar{opacity:0}
.player.sin .bar{display:none}
.desc{grid-column:1/span 5}
.desc p+p{margin-top:var(--s3)}
.brk{grid-column:7/span 6;margin-top:6px}
.mos{display:flex;flex-direction:column;gap:var(--ig)}
.mos .row{display:flex;gap:var(--ig);align-items:flex-start}
.mos figure{position:relative;flex:none;overflow:hidden;background:#d9d3c9;cursor:zoom-in}
.mos figure picture,.mos figure img,.mos figure video{width:100%;height:100%;object-fit:cover}
.mos figure.vid{cursor:pointer;background:#1b1916}
.mos figure.vid .bar{height:var(--s7);grid-template-columns:var(--s7) 1fr;padding-right:var(--s3);column-gap:var(--s3)}
.mos figure.vid .play{width:var(--s7);height:var(--s7)}
.mos figure.vid.ini .bar{display:none}
.mos figure.vid video{position:absolute;inset:0;object-fit:contain}
.next{display:block}
.next .g12{align-items:end}
.next .nt{grid-column:1/span 6}
.next .nt .f26{display:block;margin-top:var(--s3)}
.next .cv{grid-column:7/span 6;aspect-ratio:16/9;overflow:hidden;background:#d9d3c9}
.next .cv picture,.next .cv img{width:100%;height:100%;object-fit:cover}
.next:hover .u{background-size:100% 1px}
.idx{list-style:none;padding:0;border-top:1px solid var(--rule)}
.idx a{display:grid;grid-template-columns:48px minmax(0,1fr) 248px 216px 112px;column-gap:var(--s5);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.idx .tl{display:block;min-width:0}
.idx .tl>span{display:inline-block;transition:transform .3s var(--ease)}
.idx .th{width:112px;height:63px;overflow:hidden;opacity:.9;background:#d9d3c9;transition:opacity .3s var(--ease)}
.idx .th picture,.idx .th img{width:100%;height:100%;object-fit:cover}
.idx .n{transition:color .3s var(--ease)}
.idx .cur{margin-left:var(--s3);vertical-align:.32em}
.idx a:hover .tl>span,.idx a:focus-visible .tl>span{transform:translateX(8px)}
.idx a:hover .th,.idx a:focus-visible .th{opacity:1}
.idx a:hover .n,.idx a:focus-visible .n{color:var(--ink)}
.idx .rl{display:none}
.pn{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s8);border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.pn a{padding:var(--s4) 0}
.pn a+a{text-align:right;border-left:1px solid var(--rule)}
.pn .label{display:flex;align-items:center;gap:var(--s3)}
.pn a+a .label{justify-content:flex-end}
.pn .f26{display:block;margin-top:var(--s2)}
.pn a:hover .ln{animation:empuje .5s var(--ease)}
.pn a:hover .lnl{animation:empujei .5s var(--ease)}
@keyframes empuje{50%{transform:translateX(5px)}}
@keyframes empujei{50%{transform:translateX(-5px)}}

/* Solapa del borde (sólo con mouse) */
.edge{position:fixed;bottom:var(--s8);width:290px;padding:var(--s4);background:var(--paper) var(--tex) 0 0/140px 140px repeat;border:1px solid var(--ink);z-index:30;visibility:hidden;transition:transform .24s var(--ease),visibility 0s .24s}
.edge.d{right:0;border-right:0;transform:translateX(100%)}
.edge.i{left:0;border-left:0;transform:translateX(-100%)}
.edge.on{transform:none;visibility:visible;transition:transform .24s var(--ease),visibility 0s}
.edge .eh{display:flex;align-items:center;gap:var(--s3)}
.edge .eh .muted{margin-left:auto}
.edge.i .eh{flex-direction:row}
.edge .th{display:block;width:256px;height:144px;overflow:hidden;margin:var(--s4) 0 var(--s3);background:#d9d3c9}
.edge .th picture,.edge .th img{width:100%;height:100%;object-fit:cover}
.edge .f20{display:block;margin-top:var(--s1)}

/* ---------- Product Photography ---------- */
.pp .head .tt{grid-column:1/-1}
.pp .head{padding-bottom:var(--s8)}
.filt{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s5);row-gap:var(--s2);margin:0 calc(-1 * var(--gut)) var(--s4);padding:var(--s3) var(--gut);background:var(--paper) var(--tex) 0 0/140px 140px repeat;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.filt .modo{display:flex;gap:var(--s5);align-items:center}
.filt button{position:relative;padding:var(--s1) 0;color:var(--ink-2);transition:color .2s}
.filt button:hover{color:var(--ink)}
.filt button[aria-pressed=true]{color:var(--ink)}
.filt button[aria-pressed=true]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor}
.filt .cnt{margin-left:auto}
.filt .sub2{flex-basis:100%;display:flex;flex-wrap:wrap;column-gap:var(--s4);row-gap:var(--s1);padding-top:var(--s2);border-top:1px solid var(--rule)}
.filt .sub2[hidden]{display:none}
.filt .sub2 button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.filt .sw{display:inline-block;width:8px;height:8px;flex:none}
.filt .sub2 .k{color:var(--ink-2);opacity:.7}
.grp{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s5) 0 var(--s3)}
.grp:first-child{padding-top:var(--s2)}
.pp .mos figure{transition:width .3s var(--ease)}
.pp .mos figure:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(16,13,10,0);transition:box-shadow .45s}

/* Foto abierta */
.pop{position:fixed;inset:0;z-index:60;background:var(--paper) var(--tex) 0 0/140px 140px repeat;display:grid;grid-template-rows:76px minmax(0,1fr) 76px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s .25s}
.pop.on{opacity:1;visibility:visible;transition:opacity .25s var(--ease),visibility 0s}
.pop .pt,.pop .pb{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:var(--s4);padding:0 var(--gut)}
.pop .pt{border-bottom:1px solid var(--ink)}
.pop .pb{border-top:1px solid var(--rule)}
.pop .r{justify-self:end}
.pop .x{display:inline-flex;align-items:center;gap:var(--s3)}
.pop .x .xi{position:relative;width:12px;height:12px;display:inline-block}
.pop .x .xi:before,.pop .x .xi:after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1px;background:currentColor;transform:rotate(45deg)}
.pop .x .xi:after{transform:rotate(-45deg)}
.pop .nv{display:inline-flex;align-items:center;gap:var(--s3)}
.pop .nv:hover{color:var(--ink-2)}
.pop .stage{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--s5) var(--gut);min-height:0;touch-action:pan-y}
.pop .stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:opacity .2s}
.pop .stage img.carga{opacity:.0}
.pop .tit{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.fija,html.fija body{overflow:hidden}

/* ---------- Sobre mí ---------- */
.bio{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col);align-items:start}
.bio .ret{grid-column:1/span 5;background:#d9d3c9}
.bio .txt{grid-column:7/span 6}
.bio .txt .f26+.f26{margin-top:var(--s5)}
.bio .txt .rows{margin-top:var(--s7)}
.cli{display:flex;flex-wrap:wrap;column-gap:var(--s3);row-gap:var(--s1)}
.cli .sep{color:var(--ink-2);opacity:.6}

/* ---------- Pie ---------- */
.ft{padding:var(--s9) var(--gut) var(--s5)}
.ft-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--col);border-top:1px solid var(--ink);padding:var(--s4) 0 var(--s8)}
.ft-row>.label:first-child{grid-column:1/span 2}
.ft-mail{grid-column:3/span 10;justify-self:start;font-size:62px;line-height:64px;letter-spacing:-.022em}
.ft-mail .u{padding-bottom:4px}
.ft-mail:hover .u{background-size:100% 1px}
.ft-meta{grid-column:3/span 10;display:flex;flex-wrap:wrap;column-gap:var(--s6);row-gap:var(--s2);margin-top:var(--s5)}
.ft-meta a:hover{color:var(--ink-2)}
.ft-bottom{display:flex;justify-content:space-between;gap:var(--s4);border-top:1px solid var(--rule);padding-top:var(--s4)}
.ft-bottom a:hover{color:var(--ink)}

/* ---------- 404 ---------- */
.nf{padding-bottom:var(--s8)}
.nf p{margin-top:var(--s5)}

/* ================= Pantallas medianas (700–1199) ================= */
@media (max-width:1199px){
  :root{--gut:var(--s6);--col:var(--s5)}
  .f147{font-size:112px;line-height:104px}
  .f96{font-size:72px;line-height:76px}
  .f62{font-size:48px;line-height:52px}
  .ft-mail{font-size:48px;line-height:52px}
  .hdr nav{gap:20px}
  .idx a{grid-template-columns:40px minmax(0,1fr) 200px 112px}
  .idx .pr{display:none}
  .head .tt{grid-column:1/span 8}
  .head .role{grid-column:9/span 4}
}
@media (max-width:959px){
  .hdr{gap:var(--s5)}
  .hdr nav{gap:16px;font-size:10.5px}
  .lang{margin-left:4px}
  .f96{font-size:60px;line-height:64px}
  .desc{grid-column:1/span 6}
  .brk{grid-column:7/span 6}
}

/* ================= Celular (< 700) ================= */
@media (max-width:699px){
  :root{--gut:var(--s4);--col:var(--s4)}
  body{font-size:15px;line-height:23px}
  .f147{font-size:clamp(44px,14vw,64px);line-height:.98}
  .f96{font-size:clamp(38px,12vw,56px);line-height:1}
  .f62{font-size:clamp(28px,8.6vw,40px);line-height:1.12}
  .f46{font-size:28px;line-height:32px;letter-spacing:-.012em}
  .f26{font-size:20px;line-height:26px}
  .f20{font-size:17px;line-height:24px}
  .pj-t{line-height:.98}
  .head .tt .pj-t+.f46{margin-top:var(--s2)}

  .hdr{height:60px;gap:var(--s4)}
  .hdr .name{font-size:14px}
  .js .mtog{display:inline-flex;align-items:center;gap:var(--s2);font-family:"Archivo";font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;height:44px}
  .mtog i{position:relative;display:inline-block;width:16px;height:7px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;transition:transform .3s var(--ease)}
  .mtog[aria-expanded=true] i{transform:scaleY(0)}
  .hdr nav{gap:var(--s4);flex-wrap:wrap}
  .js .hdr nav{position:absolute;left:0;right:0;top:59px;z-index:40;flex-direction:column;align-items:stretch;gap:0;padding:0 var(--gut) var(--s5);background:var(--paper) var(--tex) 0 0/140px 140px repeat;border-bottom:1px solid var(--ink);font-size:13px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s}
  .js .hdr.abierto nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s}
  .js .hdr nav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--rule)}
  .js .hdr nav a:after{bottom:14px;right:auto;width:24px}
  .js .lang{margin:var(--s4) 0 0;display:flex;align-items:center;gap:var(--s3);min-height:28px}
  .js .lang .pr{position:static;opacity:1;transform:none}
  html:not(.js) .hdr{height:auto;flex-wrap:wrap;padding-top:var(--s4);padding-bottom:var(--s4)}

  .top{padding-top:var(--s4)}
  .head{padding:var(--s7) 0 var(--s5);grid-template-columns:1fr}
  .head .tt,.head .role{grid-column:1/-1}
  .head .role{margin-top:var(--s5);padding-bottom:0;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);padding-top:var(--s3)}
  .head .role .label{margin:0}
  .seg{margin-top:var(--s7)}
  .seg>.label:first-child{margin-bottom:var(--s5)}

  .hero{padding-top:var(--s6)}
  .hero h1 .dot{display:none}
  .hero h1 .ln1,.hero h1 .ln2{display:block}
  .hero-sub{margin-top:var(--s4)}
  .open{margin-top:var(--s5)}
  .doors{grid-template-columns:1fr;margin-top:var(--s8)}
  .door{padding-bottom:var(--s6)}
  .door+.door{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .door .f62{margin-top:var(--s6)}
  .door .h{padding-right:0}
  .door .go{opacity:1;transform:none}

  .grid2{grid-template-columns:1fr}
  .card{height:auto;aspect-ratio:16/9}
  .ov{left:var(--s4);right:var(--s4);bottom:var(--s3);row-gap:var(--s1)}

  .bar{height:var(--s7);grid-template-columns:var(--s7) auto 1fr;column-gap:var(--s4);padding-right:var(--s4)}
  .play{width:var(--s7);height:var(--s7)}
  .player.ini .bar{grid-template-columns:var(--s7) 1fr auto auto;column-gap:var(--s3)}
  .player.ini .bar .lb{display:none}
  .g12{grid-template-columns:1fr}
  .desc,.brk{grid-column:1/-1}
  .brk{margin-top:var(--s6)}
  .next .nt,.next .cv{grid-column:1/-1}
  .next .cv{order:-1;margin-bottom:var(--s5)}
  .idx a{grid-template-columns:28px minmax(0,1fr) 80px;column-gap:var(--s3);align-items:center}
  .idx .rr,.idx .pr{display:none}
  .idx .rl{display:block;margin-top:var(--s1)}
  .idx .th{width:80px;height:45px}
  .idx .tl .f26{display:block}
  .idx .tl .sub{display:block}
  .idx .cur{margin-left:var(--s2)}
  .pn{grid-template-columns:1fr}
  .pn a+a{border-left:0;border-top:1px solid var(--rule)}

  .filt{column-gap:var(--s4)}
  .filt .modo{gap:var(--s4)}
  .filt .cnt{display:none}
  .pop{grid-template-rows:60px minmax(0,1fr) 60px}
  .pop .pt .tit{display:none}
  .pop .pt{grid-template-columns:1fr auto}
  .pop .pb .hint{display:none}
  .pop .pb{grid-template-columns:1fr 1fr}
  .pop .stage{padding:var(--s3) 0}

  .bio{grid-template-columns:1fr}
  .bio .ret,.bio .txt{grid-column:1/-1}
  .bio .txt{margin-top:var(--s6)}
  .cli{column-gap:var(--s2)}

  .ft{padding-top:var(--s8)}
  .ft-row{grid-template-columns:1fr;padding-bottom:var(--s7)}
  .ft-row>.label:first-child,.ft-mail,.ft-meta{grid-column:1/-1}
  .ft-mail{margin-top:var(--s5);font-size:clamp(22px,7vw,30px);line-height:1.2}
  .ft-meta{column-gap:var(--s5)}
  .ft-bottom{flex-wrap:wrap}
  .ft-bottom .lema{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- Añadidos de la construcción (29/10/2026) ---------- */
.bar{grid-template-columns:var(--s8) auto 1fr auto}
.bar .tm{display:block}
.player.ini .bar{grid-template-columns:var(--s8) auto 1fr auto auto}
.mos.quieto figure{transition:none!important}
html:not(.js) .mos figure{flex:var(--ar) 1 0%;width:auto!important;height:auto!important;aspect-ratio:var(--ar)}
.cap{position:absolute;left:var(--s3);bottom:var(--s3);display:none;align-items:center;gap:6px;padding:3px 7px 3px;background:var(--paper);color:var(--ink);pointer-events:none;max-width:calc(100% - 24px);overflow:hidden}
.cap .cp,.cap .cc{display:none;align-items:center;gap:6px}
.cap .sw{display:inline-block;width:8px;height:8px}
.mos[data-modo=proyecto] .cap,.mos[data-modo=color] .cap{display:flex}
.mos[data-modo=proyecto] .cap .cp,.mos[data-modo=color] .cap .cc{display:inline-flex}
.head.largo .tt{grid-column:1/-1}
.head.largo .role{grid-column:10/span 3;margin-top:var(--s5)}
.head.largo .pj-t .lin{display:block}
@media (max-width:1199px){
  .f147{font-size:96px;line-height:92px}
  .head.largo .role{grid-column:9/span 4}
  .ov .tl .st,.pn .sub{display:block}
}
@media (max-width:1099px){
  .hero h1 .dot{display:none}
  .hero h1 .ln1,.hero h1 .ln2{display:block}
}
@media (max-width:959px){
  .idx a{grid-template-columns:28px minmax(0,1fr) 112px;column-gap:var(--s4)}
  .idx .rr,.idx .pr{display:none}
  .idx .rl{display:block;margin-top:var(--s1)}
  .idx .tl .sub{display:block}
}
@media (max-width:699px){
  .f147{font-size:clamp(44px,14vw,64px);line-height:.98}
  .head.largo .f147{font-size:clamp(34px,10.4vw,56px)}
  .head.largo .role{grid-column:1/-1}
  .idx a{grid-template-columns:28px minmax(0,1fr) 80px;column-gap:var(--s3)}
  .cap{left:var(--s2);bottom:var(--s2);font-size:9.5px;padding:2px 5px}
  .mos[data-modo=color] .cap .sw{display:none}
}
.cli{list-style:none;padding:0;margin:0}
.bio .txt p+p{margin-top:var(--s4)}
.bio .txt .f26+.f20{margin-top:var(--s5)}
.idx .tl>.rl{display:none}
@media (max-width:959px){.idx .tl>.rl{display:block}}
@media (max-width:699px){.g12>.brk:first-child{margin-top:0}}
/* Mosaicos: antes del JS, filas justificadas por proporción (flex); el JS fija medidas en píxeles pares */
.mos figure{flex:var(--ar) 1 0%;aspect-ratio:var(--ar)}
.mos.armado figure{flex:none;aspect-ratio:auto}
.pop .stage picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;min-width:0}
/* Títulos de dos renglones: interlineado 1 (la cola de la j no se acerca al renglón de abajo) y el rol en la misma fila */
.head.largo .pj-t{line-height:1}
.head.largo .tt{grid-row:1}
.head.largo .role{grid-row:1;align-self:end;margin-top:0}
@media (max-width:699px){.head.largo .role{grid-row:auto;margin-top:var(--s5)}}

/* ================= Ajustes del 29/10/2026, tarde (pedidos de Gabi tras verlo en línea) ================= */

/* 1. Raya del menú: aparece gruesa y se afina sola, sin saltos (también al pasar el mouse) */
.hdr nav a:after{height:4px;bottom:-7px;transform:scale(0,.375);transform-origin:left bottom;transition:transform .45s var(--ease)}
.hdr nav a.on:after{transform:scale(1,.375);animation:raya .5s var(--ease) both}
.hdr nav a:not(.on):hover:after{transform:scale(1,.375);animation:raya .5s var(--ease) both}
@keyframes raya{0%{transform:scale(0,1)}55%{transform:scale(1,1)}100%{transform:scale(1,.375)}}
@media (max-width:699px){.js .hdr nav a:after{bottom:12px}}

/* 2. Transiciones entre páginas: View Transitions entre documentos, mínimas */
@view-transition{navigation:auto}
.hdr{view-transition-name:cabecera}
::view-transition-group(cabecera){animation:none}
::view-transition-old(cabecera),::view-transition-new(cabecera){animation:none}
::view-transition-old(root){animation:vt-sale .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-entra .5s var(--ease) .06s both}
@keyframes vt-sale{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(12px)}}
/* respaldo sin View Transitions (lo activa sitio.js): fundido + 10 px, escalonado apenas */
.fx main>*,.fx .ft{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.fx main>:nth-child(2){transition-delay:.04s}.fx main>:nth-child(3){transition-delay:.08s}.fx main>:nth-child(n+4),.fx .ft{transition-delay:.12s}
.fx.entrando main>*,.fx.entrando .ft{opacity:0;transform:translateY(10px)}
.fx.saliendo main,.fx.saliendo .ft{opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* 4. Tamaños: los títulos escalan con el ancho y el alto de la ventana; nada pasa del alto de pantalla */
@media (min-width:700px){
  .f147{font-size:clamp(64px,min(8.4vw,14.5vh),168px);line-height:round(calc(clamp(64px,min(8.4vw,14.5vh),168px) * .925),1px)}
  .f96{font-size:clamp(44px,min(5.6vw,9.5vh),112px);line-height:round(calc(clamp(44px,min(5.6vw,9.5vh),112px) * 1.02),1px)}
  .f62,.ft-mail{font-size:clamp(32px,min(3.8vw,6.5vh),72px);line-height:round(calc(clamp(32px,min(3.8vw,6.5vh),72px) * 1.04),1px)}
  .f46{font-size:clamp(26px,min(2.9vw,5vh),52px);line-height:round(calc(clamp(26px,min(2.9vw,5vh),52px) * 1.05),1px)}
  .head.largo .pj-t{line-height:1}
}
@media (min-width:1700px){
  .f26{font-size:30px;line-height:36px}
  .f20{font-size:22px;line-height:30px}
  .label{font-size:12px;line-height:15px}
}
.player{width:min(100%,calc(72svh * var(--ar)));margin-inline:auto}
.open{max-width:calc(76svh * var(--ar));margin-inline:auto}
.open-pie{max-width:calc(76svh * var(--ar));margin-inline:auto}
.bio .ret{max-width:calc(80svh * var(--ar))}
@media (max-width:699px){.open,.open-pie{max-width:none;margin-left:var(--gut);margin-right:var(--gut)}.player{width:100%}}

/* 5. Product Photography: mar de fotos chicas; la foto crece en ancho y alto y el resto se reacomoda */
.mar{position:relative;transition:height .5s var(--ease)}
.js .mar figure{position:absolute;left:0;top:0;margin:0;overflow:hidden;background:#d9d3c9;cursor:zoom-in;transition:transform .55s var(--ease),width .55s var(--ease),height .55s var(--ease),opacity .3s}
.mar figure picture,.mar figure img{width:100%;height:100%;object-fit:cover}
.mar.quieto,.mar.quieto figure{transition:none!important}
.mar figure.fuera{opacity:0;pointer-events:none}
.mar figure.activa{z-index:2}
html:not(.js) .mar{display:flex;flex-wrap:wrap;gap:2px;height:auto!important}
html:not(.js) .mar figure{position:relative;flex:var(--ar) 1 calc(var(--ar) * 190px);aspect-ratio:var(--ar);overflow:hidden}
.mar[data-modo=proyecto] .cap,.mar[data-modo=color] .cap{display:flex}
.mar[data-modo=proyecto] .cap .cp,.mar[data-modo=color] .cap .cc{display:inline-flex}
.mar .cap{font-size:9.5px;padding:2px 5px;left:var(--s2);bottom:var(--s2)}
.mar[data-modo=color] .cap .sw{display:none}
/* 3. La solapa aparece a la altura del cursor (sitio.js fija top) */
.edge{bottom:auto;top:calc(50% - 150px);transition:transform .24s var(--ease),top .22s ease-out,visibility 0s .24s}
.edge.on{transition:transform .24s var(--ease),top .22s ease-out,visibility 0s}
img{height:auto}
.bio .ret picture,.bio .ret img{width:100%;height:100%;object-fit:cover}

/* Hover de la media: la imagen se transforma dentro de su marco (sitio.js); el marco recorta */
.card picture,.idx .th picture,.next .cv picture,.player>picture,.edge .th picture,.mos figure picture,.mar figure picture{transform-origin:50% 50%;backface-visibility:hidden}
.next .cv,.player,.idx .th,.edge .th{overflow:hidden}

/* ================= Correcciones de Maru (29/10/2026) ================= */
/* 5. Créditos más chicos: nombres 17 px (antes 20) y rótulo 10 px (antes 11) */
.brk .rows .f20{font-size:17px;line-height:24px}
.brk .rows .k{font-size:10px;line-height:13px}
.brk .rows>li{padding:10px 0}
@media (min-width:1700px){.brk .rows .f20{font-size:19px;line-height:26px}.brk .rows .k{font-size:11px;line-height:14px}}
/* 6. Celular: la tipografía guarda la misma relación con el ancho de la imagen que en escritorio */
@media (max-width:699px){
  .f147{font-size:clamp(32px,9.6vw,60px);line-height:1}
  .head.largo .f147{font-size:clamp(28px,8vw,48px)}
  .f96{font-size:clamp(28px,8.6vw,52px);line-height:1.04}
  .f62{font-size:clamp(22px,6.6vw,34px);line-height:1.15}
  .f46{font-size:clamp(17px,4.6vw,28px);line-height:1.25}
  .f26{font-size:clamp(16px,4.4vw,20px);line-height:1.3}
  .f20{font-size:16px;line-height:23px}
  .hero h1{font-size:clamp(24px,7.6vw,36px);line-height:1.1;white-space:nowrap}
  .hero h1 .dot{display:inline}
  .hero h1 .ln1,.hero h1 .ln2{display:inline}
  .ov .tl.f26{font-size:clamp(14px,4vw,22px);line-height:1.25}
  .ov .tl .st{display:inline}
  .ov{left:12px;right:12px;bottom:10px;row-gap:2px}
  .ov .label{font-size:9.5px;line-height:12px}
  .brk .rows .f20{font-size:15px;line-height:21px}
  .brk .rows .k{font-size:9.5px;line-height:12px}
  .ft-mail{font-size:clamp(20px,6vw,30px)}
  .label{font-size:10px;line-height:13px}
}