/* Concepto: la sala a oscuras. Cada pared es una tira horizontal de fotos iluminadas; la ficha imita la funda de un negativo. */
:root{
  --bg:#13120f;          /* sala en penumbra, grafito cálido */
  --wall:#1b1915;        /* paño de pared */
  --raise:#24211c;       /* paneles y fichas */
  --fg:#ece6d8;          /* papel fotográfico */
  --muted:#a69e8e;
  --line:#3b362e;
  --accent:#c9a84c;      /* oro: latón de las placas */
  --accent-ink:#1a160c;
  --f-display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body:"Newsreader", Georgia, "Times New Roman", serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter:clamp(16px,4vw,48px);
  --rowh:clamp(180px,28vh,300px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{padding-inline:var(--gutter);max-width:1240px;margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.muted{color:var(--muted)}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:.95;text-wrap:balance;margin:0;letter-spacing:.01em}
p{margin:0}

/* barra superior */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:20px;min-height:52px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-weight:800;font-size:22px;text-decoration:none;letter-spacing:.04em;text-transform:uppercase}
.brand span{color:var(--accent)}
.nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.nav a{text-decoration:none;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-block:6px}
.nav a:hover,.nav a[aria-current="true"]{color:var(--fg)}

/* portada */
.hero{position:relative;min-height:min(82vh,760px);display:grid;align-items:end;overflow:hidden;border-bottom:1px solid var(--line)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.62)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 4%,transparent 60%)}
.hero .wrap{position:relative;z-index:1;padding-block:48px 56px;width:100%}
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);max-width:60ch}
.hero h1{font-size:clamp(64px,14vw,190px);text-transform:uppercase;margin-top:14px;letter-spacing:-.005em}
.hero .sub{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,3.2vw,38px);text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
.hero .sub b{color:var(--accent);font-weight:600}
.hero .facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px}
.hero .facts div{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero .facts strong{display:block;font-family:var(--f-display);font-size:34px;color:var(--fg);letter-spacing:0;font-weight:700}
.hero .credit{position:absolute;right:var(--gutter);top:18px;z-index:1}

section.block{padding-block:72px;border-bottom:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-head h2{font-size:clamp(40px,6vw,72px);text-transform:uppercase}
.lead{font-size:21px;max-width:62ch}

/* los fotógrafos */
.gen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}
.gen article{border-top:2px solid var(--line);padding-top:16px;display:grid;gap:8px;align-content:start}
.gen article.main{border-top-color:var(--accent)}
.gen h3{font-size:34px;text-transform:uppercase}
.gen p{font-size:17px;color:var(--muted)}
.pending{display:inline-block;margin-top:24px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px dashed var(--accent);color:var(--accent);padding:6px 10px}

/* plano */
.plan-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start}
.plan svg{width:100%;height:auto;display:block}
.plan .room{fill:var(--wall);stroke:none}
.plan .edge{stroke:var(--line);stroke-width:2;fill:none}
.plan .glass{stroke:#6d7a80;stroke-width:3;stroke-dasharray:6 4}
.plan .nohang{stroke:var(--line);stroke-width:4;stroke-dasharray:2 4}
.plan .col{fill:var(--bg);stroke:var(--muted);stroke-width:1.5}
.plan .lbl{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;fill:var(--muted);text-transform:uppercase}
.plan .roomname{font-family:var(--f-display);font-size:22px;font-weight:700;fill:var(--muted);letter-spacing:.06em}
.plan a .w{stroke:var(--fg);stroke-width:7;stroke-linecap:butt;transition:stroke .2s}
.plan a .hit{stroke:transparent;stroke-width:36}
.plan a .wl{font-family:var(--f-display);font-size:14px;font-weight:700;fill:var(--fg);letter-spacing:.03em;text-transform:uppercase}
.plan a .wm{font-family:var(--f-mono);font-size:8.5px;fill:var(--muted)}
.plan a:hover .w,.plan a:focus-visible .w,.plan a.on .w{stroke:var(--accent)}
.plan a:hover .wl,.plan a:focus-visible .wl,.plan a.on .wl{fill:var(--accent)}
.plan a:focus-visible{outline:none}
.walls{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.walls a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;text-decoration:none;padding:8px;border-radius:2px}
.walls a:hover,.walls a.on{background:var(--raise)}
.walls img{width:72px;height:52px;object-fit:cover;filter:grayscale(.3)}
.walls b{font-family:var(--f-display);font-size:22px;font-weight:700;text-transform:uppercase;display:block;line-height:1}
.walls small{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.05em}

/* miradas */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line);padding:8px 14px;border-radius:999px;color:var(--fg);background:transparent;cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.mir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:18px;margin-top:32px}
.mir-card{display:grid;gap:10px;text-decoration:none;align-content:start}
.mir-card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--wall)}
.mir-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mir-card:hover img{transform:scale(1.04)}
.mir-card b{font-family:var(--f-display);font-size:24px;text-transform:uppercase;font-weight:700;line-height:1}
.mir-card span{font-size:15px;color:var(--muted);line-height:1.4}

/* vista de pared */
.view[hidden]{display:none}
.sala-head{padding-block:28px 18px;display:grid;gap:10px}
.sala-head .crumbs{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sala-head .crumbs a{color:var(--muted);text-decoration:none}
.sala-head .crumbs a:hover{color:var(--fg)}
.sala-head h1{font-size:clamp(48px,9vw,120px);text-transform:uppercase}
.sala-nav{display:flex;gap:10px;flex-wrap:wrap}
.wall{position:relative;background:var(--wall);border-block:1px solid var(--line)}
.wall-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:var(--line) transparent}
.wall-track{display:flex;gap:44px;padding:44px var(--gutter);width:max-content;align-items:flex-start}
.panel{width:min(560px,82vw);display:grid;gap:16px;flex:none}
.panel h2{font-size:44px;text-transform:uppercase;color:var(--accent)}
.panel .iria p{font-size:19px;line-height:1.65}
.panel .iria p+p{margin-top:12px}
.panel.notas{width:min(440px,80vw);border-left:1px solid var(--line);padding-left:28px}
.panel.notas h3{font-family:var(--f-body);font-style:italic;font-weight:600;font-size:19px;line-height:1.3;letter-spacing:0}
.panel.notas p{font-size:16px;color:var(--muted)}
.panel.notas .n+.n{margin-top:18px}
.rows{display:grid;gap:18px;flex:none}
.row{display:flex;gap:18px;height:var(--rowh)}
.sublabel{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);align-self:stretch;text-align:center;flex:none;border-left:1px solid var(--line);padding-left:10px}
.ph-btn{all:unset;cursor:zoom-in;position:relative;height:100%;flex:none;background:#000;box-shadow:0 18px 40px -18px #000}
.ph-btn img{height:100%;width:100%;object-fit:cover;transition:filter .3s}
.ph-btn:hover img{filter:brightness(1.08)}
.ph-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ph-btn .cap{position:absolute;left:0;right:0;bottom:-26px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row{margin-bottom:22px}
.ph-btn .flag{position:absolute;top:8px;left:8px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.ruler{padding:6px var(--gutter) 14px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ruler .ticks{flex:1;min-width:160px;height:10px;background:repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px calc(100% / var(--m)));border-bottom:1px solid var(--muted);opacity:.6}
.hint{display:flex;gap:8px;align-items:center}
.legend{display:flex;gap:18px;flex-wrap:wrap;padding-block:18px 0}
.legend span{display:inline-flex;gap:8px;align-items:center}
.legend i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}

/* relato */
.plate{margin:0}
.plate img{width:100%;height:auto;display:block}
.teaser-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.teaser .plate{max-width:380px}
.teaser-text{display:grid;gap:18px;justify-items:start}
.teaser-text h2{font-size:clamp(44px,6.5vw,84px);text-transform:uppercase}
#r-body{display:grid;gap:96px;padding-block:24px 96px}
.chap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;scroll-margin-top:72px}
.chap .plate{position:sticky;top:76px}
.chap:nth-child(even) .plate{order:2}
.chap-text{display:grid;gap:16px;justify-items:start;max-width:62ch}
.chap-text p{font-size:20px;line-height:1.7}
.chap-text h2{font-size:clamp(36px,5vw,60px);text-transform:uppercase}
.chap-n{font-family:var(--f-display);font-size:28px;font-weight:700;color:var(--accent);letter-spacing:.1em}
.chap-card{display:grid;gap:10px;align-content:start;text-decoration:none;width:min(300px,80vw)}
.chap-card img{max-height:260px;width:100%;object-fit:contain}
.chap-card b{font-family:var(--f-display);font-size:30px;text-transform:uppercase;line-height:1}
.chap-card:hover b{color:var(--accent)}
@media (max-width:860px){
  .teaser-grid,.chap{grid-template-columns:1fr;gap:24px}
  .chap .plate{position:static}
  .chap:nth-child(even) .plate{order:0}
  #r-body{gap:64px}
}

/* visor */
.lb{position:fixed;inset:0;z-index:50;background:rgba(8,7,6,.96);display:grid;grid-template-columns:minmax(0,1fr) 360px;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.lb[hidden]{display:none}
.lb .stage{position:relative;display:grid;place-items:center;padding:56px 64px;min-height:0;overflow:hidden}
.lb .stage img{max-height:calc(100vh - 112px);max-width:100%;object-fit:contain;cursor:zoom-in;transition:transform .3s}
.lb .stage img.zoom{cursor:zoom-out;transform:scale(1.9)}
.lb .arrow{all:unset;position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;display:grid;place-items:center;cursor:pointer;font-family:var(--f-mono);font-size:22px;color:var(--fg);border:1px solid var(--line);border-radius:50%;background:rgba(19,18,15,.7)}
.lb .arrow:hover{border-color:var(--accent);color:var(--accent)}
.lb .prev{left:10px}.lb .next{right:10px}
.lb .close{all:unset;position:absolute;top:12px;right:12px;cursor:pointer;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--line);z-index:2;background:var(--bg)}
.lb .close:hover{border-color:var(--accent)}
.sleeve{background:var(--raise);border-left:1px solid var(--line);padding:56px 28px 28px;overflow-y:auto;display:grid;gap:20px;align-content:start}
.sleeve .strip{display:flex;justify-content:space-between;border-block:1px solid var(--line);padding-block:6px;color:var(--accent)}
.sleeve h2{font-size:40px;text-transform:uppercase}
.sleeve dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0}
.sleeve dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.sleeve dd{margin:0;font-size:16px;overflow-wrap:anywhere}
.sleeve .nota{font-style:italic;font-size:18px;line-height:1.55;border-left:2px solid var(--accent);padding-left:14px}
.warn{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px dashed var(--accent);padding:6px 10px;justify-self:start}
.sleeve .count{color:var(--muted)}

footer{padding-block:48px 64px}
footer .wrap{display:grid;gap:12px}

@media (max-width:860px){
  .plan-grid{grid-template-columns:1fr}
  .gen{grid-template-columns:1fr}
  .lb{grid-template-columns:1fr;grid-template-rows:auto auto;overflow-y:auto;align-content:start}
  .lb .stage{padding:52px 8px 12px}
  .lb .stage img{max-height:62vh;width:auto;height:auto}
  .lb .stage{overflow:visible;display:block}
  .lb .stage img{margin-inline:auto}
  .lb:not([hidden]){display:block}
  .sleeve{border-left:0;border-top:1px solid var(--line);padding:20px var(--gutter) 32px}
  .lb .arrow{top:auto;bottom:16px;translate:none}
}
@media (max-width:720px){
  body{font-size:17px}
  .wall-scroll{overflow:visible}
  .wall-track{flex-direction:column;width:auto;gap:32px;padding:28px var(--gutter)}
  .panel,.panel.notas{width:auto}
  .panel.notas{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
  .rows{width:100%}
  .row{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:28px 12px}
  .ph-btn{height:auto;width:auto !important}
  .ph-btn img{height:auto;aspect-ratio:var(--ar)}
  .sublabel{writing-mode:horizontal-tb;transform:none;border-left:0;padding-left:0;text-align:left;grid-column:1/-1}
  .ruler .hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.wall-track > .panel.notas:first-child{border-left:0;padding-left:0}

/* textos de empresa */
.row{margin-bottom:104px}
.ph-btn .exc{position:absolute;left:0;right:0;top:calc(100% + 30px);font-family:var(--f-body);font-size:14px;line-height:1.45;color:var(--muted);white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-width:200px}
.sleeve .emp p:last-child{font-size:16px;line-height:1.6}
@media (max-width:720px){
  .row{margin-bottom:0}
  .ph-btn .cap,.ph-btn .exc{position:static;display:block;margin-top:8px}
  .ph-btn .exc{display:-webkit-box;min-width:0;font-size:13.5px}
}
@media (max-width:720px){
  .row{grid-template-columns:minmax(0,1fr);gap:36px}
  .ph-btn{background:transparent;box-shadow:none;align-self:start;display:block}
  .ph-btn img{display:block}
  .ph-btn .cap{white-space:normal}
}

/* textos con "más" */
.ph-btn .exc{display:block;-webkit-line-clamp:unset;overflow:visible;cursor:default;min-width:0}
.ph-btn .exc .exc-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:2px}
.ph-btn .exc .more{position:absolute;right:0;bottom:0;padding-left:28px;background:linear-gradient(to right,transparent,var(--wall) 26px);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);cursor:pointer;line-height:1.85}
.ph-btn .exc .more:hover,.ph-btn .exc .more:focus-visible{text-decoration:underline;outline:none}
.ph-btn .exc.fits .more{display:none}
.ph-btn .exc.open{z-index:6;background:var(--raise);color:var(--fg);padding:12px 14px 30px;margin:0 -14px;box-shadow:0 20px 40px -12px #000;border:1px solid var(--line)}
.ph-btn .exc.open .exc-t{-webkit-line-clamp:unset;display:block}
.ph-btn .exc.open .more{right:14px;bottom:8px;background:none;padding-left:0}
.row{margin-bottom:84px}
@media (max-width:720px){
  .row{margin-bottom:0}
  .ph-btn .exc{position:relative}
  .ph-btn .exc .more{background:linear-gradient(to right,transparent,var(--wall) 26px)}
  .ph-btn .exc.open{margin:6px 0 0;padding:12px 14px 30px}
}

/* ---------- logo 140 aniversario e idioma */
.hero img.logo140{position:static;inset:auto;display:block;width:auto;height:clamp(84px,11vw,128px);object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));margin-bottom:20px}
.logo140-foot{width:auto;height:96px;margin-bottom:8px}
.lang{text-decoration:none;font-size:12px;letter-spacing:.1em;border:1px solid var(--line);padding:4px 9px;border-radius:2px;color:var(--fg)}
.lang:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:720px){.hero img.logo140{height:76px;margin-bottom:14px}.topbar .lang{order:2;margin-left:auto}.topbar .nav{order:3;width:100%;margin-left:0}}