/* a_valverde · web pública
   Paleta azul acero monocroma, tipografía condensada (Anton) + mono (IBM Plex Mono),
   tarjetas con esquinas biseladas y firma gigante en contorno de fondo. */

:root {
  --bg:       #4e6780;
  --bg-2:     #5d7791;
  --bg-deep:  #2d4256;
  --card:     #b8cde0;
  --ink:      #f3f6f9;
  --ink-dim:  rgba(243, 246, 249, .58);
  --line:     rgba(243, 246, 249, .22);
  --tint:     #46607a;
  --cut:      18px;
  --gut:      clamp(16px, 3.2vw, 44px);
  --disp:     'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --logo:     'Michroma', 'Arial', sans-serif;   /* ancha y espaciada, contrasta con la condensada de los títulos */
  --mono:     'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --sans:     'IBM Plex Sans', system-ui, sans-serif;

  --t-proyecto:     #e9f1f8;
  --t-exposicion:   #9fd0ff;
  --t-workshop:     #cfe1a8;
  --t-premios:      #ffd88a;
  --t-conferencias: #c9c3ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.6;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--bg-deep); }

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.55; font-weight: 400; }
.dim  { color: var(--ink-dim); }
.disp { font-family: var(--disp); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; }

/* ── Firma de fondo ──────────────────────────────────────────────────
   Texto gigante en la misma condensada de los títulos, solo contorno. */
.spray {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  display: flex; align-items: center; justify-content: center;
}
.spray span {
  font-family: var(--disp); text-transform: uppercase; white-space: nowrap; line-height: .8; letter-spacing: -.01em;
  font-size: clamp(120px, 23vw, 440px);
  color: transparent; -webkit-text-stroke: 1.5px rgba(223, 233, 243, .32);
}
/* variante: relleno con grano (body.firma-grano) */
.firma-grano .spray span { color: rgba(223, 233, 243, .16); -webkit-text-stroke: 0; filter: url(#spray); }
.spray-sm span { font-size: clamp(110px, 16vw, 260px); -webkit-text-stroke-color: rgba(223, 233, 243, .4); transform: translate(10%, 34%); }
.spray-mani span { font-size: clamp(120px, 23vw, 440px); -webkit-text-stroke-color: rgba(223, 233, 243, .45); transform: translateY(-30%); }

/* ── Tinte azul sobre fotografías ────────────────────────────────────── */
.tint { position: relative; overflow: hidden; background: var(--card); }
.tint img { filter: grayscale(.85) contrast(1.05) brightness(1.05); transition: filter .5s, transform .8s cubic-bezier(.2,.7,.2,1); }
.tint::after {
  content: ''; position: absolute; inset: 0; background: var(--tint);
  mix-blend-mode: color; opacity: .75; transition: opacity .5s; pointer-events: none;
}
a:hover .tint img, .tint:hover img { filter: none; transform: scale(1.03); }
a:hover .tint::after, .tint:hover::after { opacity: 0; }

/* ── Cabecera ────────────────────────────────────────────────────────── */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 18px var(--gut);
  transition: background .3s, padding .3s, backdrop-filter .3s;
}
.top.solid { background: rgba(45, 66, 86, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-top: 12px; padding-bottom: 12px; }
.logo { font-family: var(--logo); font-weight: 400; font-size: 15px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.menu { display: flex; justify-content: center; gap: clamp(14px, 3vw, 48px); }
.menu a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; transition: opacity .2s; white-space: nowrap; }
.menu a:hover, .menu a.on { opacity: 1; }
.top-r { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.lang a { font-family: var(--mono); font-size: 10px; padding: 4px 8px; opacity: .6; }
.lang a.on { background: var(--ink); color: var(--bg-deep); opacity: 1; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }

/* ── Botón octogonal ─────────────────────────────────────────────────── */
.octa { display: inline-flex; align-items: center; gap: 20px; }
.octa-s { width: 84px; height: 84px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.2; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.octa-s path { stroke-width: 2; }
.octa:hover .octa-s, a:hover > .feat-tx .octa-s { transform: rotate(45deg); }
.octa-t { display: flex; flex-direction: column; gap: 2px; }
.octa-t b { font-family: var(--mono); font-weight: 400; font-size: 22px; letter-spacing: .02em; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: max(640px, 100svh); overflow: hidden;
  background:
    radial-gradient(1200px 700px at 55% 40%, #7c94ab 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  padding: 110px var(--gut) 40px;
}
.slide {
  position: absolute; inset: 0; padding: 110px var(--gut) 70px;
  display: grid; grid-template-columns: minmax(280px, 32%) 1fr minmax(200px, 24%); gap: 24px;
  opacity: 0; visibility: hidden; transition: opacity .9s, visibility .9s; z-index: 1;
}
.slide.on { opacity: 1; visibility: visible; }
.hero-obra .slide { position: relative; padding: 0; min-height: calc(max(640px, 100svh) - 150px); }
.hero-l { position: relative; z-index: 3; align-self: center; display: flex; flex-direction: column; gap: 28px; padding-bottom: 20px; }
.kick a:hover { color: var(--ink); }
.hero-t { font-size: clamp(48px, 6.4vw, 104px); text-wrap: balance; hyphens: auto; }
.hero-t.t-m  { font-size: clamp(42px, 5.2vw, 88px); }
.hero-t.t-l  { font-size: clamp(38px, 4.2vw, 72px); }
.hero-t.t-xl { font-size: clamp(32px, 3.4vw, 58px); }
.arch-t.t-m, .arch-t.t-l, .arch-t.t-xl { font-size: clamp(54px, 8vw, 140px); }
.slide .hero-l > * { transform: translateY(16px); opacity: 0; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s; }
.slide.on .hero-l > * { transform: none; opacity: 1; }
.slide.on .hero-l > :nth-child(2) { transition-delay: .08s; }
.slide.on .hero-l > :nth-child(3) { transition-delay: .16s; }
.slide.on .hero-l > :nth-child(4) { transition-delay: .24s; }
.meta { display: grid; gap: 10px; max-width: 380px; }
.meta div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.meta dt { color: var(--ink-dim); }
.meta u { text-underline-offset: 4px; }
.hero-c {
  position: relative; z-index: 2; grid-column: 2 / 3; align-self: stretch; display: block;
  overflow: hidden; background: var(--bg-deep);
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 36px 100%, 0 calc(100% - 36px));
}
.hero-c img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) contrast(1.06); transform: scale(1.04); transition: transform 7s linear, filter .6s; }
.slide.on .hero-c img { transform: scale(1); }
.hero-c:hover img { filter: none; }
.hero-r {
  position: absolute; z-index: 4; right: 0; top: 0; bottom: 0; width: calc(24% - 10px);
  display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 110px 0 70px;
}
.hero-thumbs { display: flex; gap: 14px; overflow: hidden; padding-left: 4px; }
.ht {
  flex: none; width: clamp(140px, 15vw, 220px); aspect-ratio: 3 / 4; border: 0; padding: 0; cursor: pointer;
  background: var(--card); overflow: hidden; opacity: .55; transition: opacity .3s, width .5s;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.ht img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.7); }
.ht:hover, .ht.on { opacity: 1; }
.counter { display: flex; align-items: center; gap: 12px; padding-left: 4px; }
.counter i { width: 90px; height: 1px; background: var(--ink-dim); position: relative; overflow: hidden; }
.counter i::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.hero-foot { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); bottom: 22px; display: flex; justify-content: space-between; gap: 16px; }
.hero-obra { min-height: max(640px, 100svh); }
.hero-obra .hero-r { padding-top: 0; }

/* ── Secciones ───────────────────────────────────────────────────────── */
.sec { position: relative; padding: clamp(60px, 9vw, 120px) var(--gut); }
.sec-h {
  display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto auto; align-items: start; gap: clamp(16px, 4vw, 70px);
  margin-bottom: clamp(30px, 4vw, 56px);
}
.sec-h h2 { font-size: clamp(44px, 5.4vw, 86px); }
.sec-note { max-width: 420px; align-self: end; }
.brk { list-style: none; padding-top: 6px; }
.pill {
  justify-self: end; background: var(--ink); color: var(--bg-deep); border: 0; border-radius: 999px;
  padding: 8px 20px; cursor: pointer; transition: background .2s; display: inline-block;
}
.pill:hover { background: #fff; }
.sec-more { margin-top: 48px; display: flex; justify-content: center; }
.sec-tt { font-size: 12px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 36px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: none;
  border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
}
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--bg-deep); border-color: var(--ink); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; vertical-align: 1px; margin-right: 6px; }
.chip .dot { margin: 0; }
.dot-proyecto { background: var(--t-proyecto); }
.dot-exposicion { background: var(--t-exposicion); }
.dot-workshop { background: var(--t-workshop); }
.dot-premios { background: var(--t-premios); }
.dot-conferencias { background: var(--t-conferencias); }

/* ── Rejillas y tarjetas ─────────────────────────────────────────────── */
.grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.grid-home { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; gap: 14px; }
.card-img {
  display: block; aspect-ratio: 3 / 4;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-badge { position: absolute; z-index: 2; left: 10px; bottom: 10px; background: var(--bg-deep); padding: 2px 6px; font-size: 9.5px; }
.card-tx { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; }
.card-t { font-weight: 500; }
.card-m { display: flex; align-items: center; flex-wrap: wrap; }
.card:hover .card-t { text-decoration: underline; text-underline-offset: 3px; }

.feat {
  grid-column: span 2; position: relative; overflow: hidden; background: var(--bg-deep);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  align-self: stretch; min-width: 0; min-height: 380px;   /* ocupa exactamente 2 columnas y el alto de la fila */
}
.feat > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.8) brightness(.8); transition: filter .6s, transform 1.2s; }
.feat:hover > img { filter: grayscale(.2) brightness(.75); transform: scale(1.03); }
.feat .spray { z-index: 1; }
.feat-tx { position: absolute; z-index: 2; right: 7%; top: 14%; width: 56%; max-height: 80%; overflow: hidden; display: flex; flex-direction: column; gap: 22px; }
.feat-t { font-size: clamp(26px, 2.6vw, 46px); text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.feat-o { display: flex; align-items: center; gap: 14px; }
.feat-o .octa-s { width: 56px; height: 56px; }

/* ── Series ──────────────────────────────────────────────────────────── */
.sec-series { background: var(--bg-deep); }
.series { list-style: none; border-top: 1px solid var(--line); }
.serie {
  position: relative; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 20px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.serie-t { font-size: clamp(32px, 5vw, 76px); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.serie:hover .serie-t { transform: translateX(16px); }
.serie-img {
  position: absolute; right: 18%; top: 50%; width: 220px; aspect-ratio: 3 / 4; z-index: 3; pointer-events: none;
  transform: translateY(-50%) rotate(4deg) scale(.9); opacity: 0; transition: opacity .3s, transform .5s;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.serie-img img { width: 100%; height: 100%; object-fit: cover; }
.serie:hover .serie-img { opacity: 1; transform: translateY(-50%) rotate(-3deg) scale(1); }

/* ── Manifiesto ──────────────────────────────────────────────────────── */
.mani {
  position: relative; min-height: max(720px, 110svh); overflow: hidden; background: var(--bg-deep);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto;
  padding: 120px var(--gut) 48px; gap: 30px;
}
.mani-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.85); }
.mani::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--bg-deep); mix-blend-mode: color; opacity: .9; }
.mani::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--bg) 0%, rgba(45,66,86,0) 30%, rgba(45,66,86,0) 60%, rgba(30,46,60,.75) 100%); }
.mani .spray { z-index: 2; }
.mani-l, .mani-r, .mani-claim { position: relative; z-index: 3; }
.mani-l { grid-column: 1; grid-row: 2; max-width: 280px; }
.mani-r { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; max-width: 220px; align-self: end; }
.mani-claim { grid-column: 1 / -1; grid-row: 3; font-size: clamp(40px, 6vw, 100px); max-width: 22ch; }

/* ── Pie ─────────────────────────────────────────────────────────────── */
.foot {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: end;
  padding: 26px var(--gut) 30px; background: #22354a;
}
.foot-l { display: flex; flex-direction: column; }
.foot-r { display: flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Ficha de obra ───────────────────────────────────────────────────── */
.obra-body { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr); gap: clamp(24px, 6vw, 100px); background: var(--bg); }
.obra-idx { position: sticky; top: 90px; align-self: start; display: flex; flex-direction: column; gap: 18px; }
.obra-idx ul { list-style: none; display: grid; gap: 8px; }
.obra-idx a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.obra-tx { max-width: 760px; }
.lead { font-size: clamp(20px, 2vw, 26px); line-height: 1.4; margin-bottom: 32px; font-weight: 300; }
.rich { font-size: 17px; line-height: 1.75; }
.rich p { margin-bottom: 1.1em; }
.rich a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-dim); overflow-wrap: anywhere; }
.rich a:hover { text-decoration-color: var(--ink); }
.rich strong, .rich b { font-weight: 500; }
.rich h2, .rich h3 { font-family: var(--disp); font-weight: 400; text-transform: uppercase; font-size: 32px; line-height: 1; margin: 1.4em 0 .5em; }
.rich ul, .rich ol { padding-left: 1.2em; margin-bottom: 1.1em; }
.rich img { margin: 1em 0; }
.rich iframe { max-width: 100%; }
.mono-sm { font-family: var(--mono); font-size: 13px; line-height: 1.7; }
.creditos { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); }
.creditos h3 { margin-bottom: 12px; }

.obra-vids { background: var(--bg-deep); }
.vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.vids.one { grid-template-columns: minmax(0, 1fr); max-width: 1200px; }
.vid video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vid figcaption { margin-top: 10px; }

.masonry { columns: 4 260px; column-gap: 14px; }
.mz {
  display: block; margin-bottom: 14px; break-inside: avoid; overflow: hidden; background: var(--bg-2); cursor: zoom-in;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.mz img { width: 100%; height: auto; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.mz:hover img { transform: scale(1.04); }

.obra-docs { padding-top: 0; }
.docs { list-style: none; border-top: 1px solid var(--line); }
.docs a { display: grid; grid-template-columns: 80px 1fr auto 30px; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; font-size: 12px; }
.docs a:hover { background: rgba(255,255,255,.05); }
.docs .da { text-align: right; }

.pn { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.pn-a { display: flex; flex-direction: column; gap: 12px; padding: 40px var(--gut); transition: background .3s; }
.pn-a .disp { font-size: clamp(24px, 3vw, 44px); }
.pn-a:hover { background: var(--bg-2); }
.pn-n { text-align: right; border-left: 1px solid var(--line); align-items: flex-end; }

/* ── Archivo / páginas ───────────────────────────────────────────────── */
.arch-h { position: relative; overflow: hidden; padding: 150px var(--gut) 50px; background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.arch-h > * { position: relative; z-index: 1; }
.arch-h .spray { z-index: 0; }
.arch-t { font-size: clamp(64px, 13vw, 220px); margin-top: 14px; overflow-wrap: anywhere; }
.arch-intro { max-width: 720px; margin-top: 24px; }
.arch { padding-top: 30px; }
.filt { position: sticky; top: 58px; z-index: 10; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 14px 0; margin-bottom: 30px; background: var(--bg); border-bottom: 1px solid var(--line); }
.filt .chips { margin: 0; }
.filt-r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sel { display: inline-flex; align-items: center; gap: 8px; }
.sel select, .filt input {
  background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; max-width: 220px;
}
.sel select option { color: #222; }
.filt input { width: 180px; text-transform: none; }
.filt input::placeholder { color: var(--ink-dim); text-transform: uppercase; }
.filt input:focus, .sel select:focus { outline: none; border-color: var(--ink); }
.year { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 30px 0; border-top: 1px solid var(--line); }
.year[hidden] { display: none; }
.year-t { font-size: 56px; position: sticky; top: 130px; align-self: start; color: var(--ink-dim); }
.card[hidden] { display: none; }
.empty { padding: 60px 0; text-align: center; }

.pg-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.pg-grid.has-img { grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 60px; max-width: none; }
.pg-img { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); align-self: start; position: sticky; top: 90px; }
.pg-tx { columns: 2 340px; column-gap: 48px; }
.pg-tx p { break-inside: avoid; }
.contact { display: grid; gap: 30px; }
.contact-mail { font-size: clamp(32px, 6vw, 96px); overflow-wrap: anywhere; }
.contact-mail:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.p404 { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; overflow: hidden; }
.p404 h1 { font-size: 30vw; position: relative; z-index: 1; }

/* ── Lightbox ────────────────────────────────────────────────────────── */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(28, 42, 56, .96); display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; }
.lb[hidden] { display: none; }
.lb-fig { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100svh; justify-content: center; padding: 60px 0 30px; min-width: 0; }
.lb-fig img, .lb-fig video { max-width: 100%; max-height: calc(100svh - 120px); object-fit: contain; }
.lb-fig video { width: min(1400px, 100%); background: #000; }
.lb-x { position: absolute; top: 18px; right: var(--gut); background: none; border: 0; cursor: pointer; z-index: 2; }
.lb-nav { background: none; border: 0; cursor: pointer; font-size: 22px; height: 100%; opacity: .6; }
.lb-nav:hover { opacity: 1; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec-h { grid-template-columns: 1fr auto; }
  .sec-h .brk { display: none; }
  .slide { grid-template-columns: minmax(260px, 42%) 1fr; }
  .hero-r { width: 22%; }
  .ht { width: 130px; }
  .hero-thumbs .ht:nth-child(n+3) { display: none; }
}
@media (max-width: 820px) {
  .menu-btn { display: inline-block; }
  .menu {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 22px; padding: 0 var(--gut); background: var(--bg-deep);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .menu a { font-size: 15px; opacity: 1; }
  .menu.open { opacity: 1; visibility: visible; }
  .top { grid-template-columns: 1fr auto; }

  .hero { padding: 0; min-height: auto; }
  .slide, .hero-obra .slide { position: relative; display: none; grid-template-columns: 1fr; padding: 90px var(--gut) 24px; min-height: 0; gap: 20px; }
  .slide.on { display: grid; }
  .hero-c { grid-column: 1; grid-row: 1; height: 58svh; }
  .hero-l { padding: 0; gap: 22px; }
  .hero-r { position: relative; width: auto; padding: 0 var(--gut) 24px; flex-direction: row; align-items: center; justify-content: space-between; }
  .ht { width: 64px; }
  .hero-thumbs .ht:nth-child(n+3) { display: block; }
  .hero-thumbs { gap: 8px; overflow-x: auto; }
  .hero-foot { position: relative; left: 0; right: 0; bottom: 0; padding: 0 var(--gut) 24px; flex-direction: column; gap: 4px; }
  .hero-obra .hero-r { padding-bottom: 30px; }
  .octa-s { width: 66px; height: 66px; }

  .grid-home, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat { grid-column: 1 / -1; aspect-ratio: 4 / 5; align-self: start; min-height: 0; }
  .feat-tx { width: 70%; top: auto; bottom: 8%; }
  .sec-h { grid-template-columns: 1fr; }
  .pill { justify-self: start; }
  .serie { grid-template-columns: 34px 1fr; }
  .serie-m { grid-column: 2; }
  .serie-img { display: none; }

  .mani { grid-template-columns: 1fr; min-height: 640px; }
  .mani-l, .mani-r { grid-column: 1; }
  .mani-r { grid-row: 3; justify-self: start; text-align: left; }
  .mani-claim { grid-row: 4; }
  .foot { grid-template-columns: 1fr; align-items: start; }
  .foot-r { justify-content: flex-start; }

  .obra-body { grid-template-columns: 1fr; }
  .obra-idx { position: static; }
  .obra-idx ul { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .vids { grid-template-columns: 1fr; }
  .masonry { columns: 2 140px; column-gap: 10px; }
  .mz { margin-bottom: 10px; }
  .docs a { grid-template-columns: 60px 1fr 24px; }
  .docs .ds { display: none; }
  .pn { grid-template-columns: 1fr; }
  .pn-n { border-left: 0; border-top: 1px solid var(--line); }

  .filt { top: 50px; flex-direction: column; }
  .filt .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .chip { white-space: nowrap; }
  .filt input { width: 100%; }
  .year { grid-template-columns: 1fr; gap: 10px; }
  .year-t { position: static; font-size: 40px; }
  .pg-grid.has-img { grid-template-columns: 1fr; gap: 30px; }
  .pg-img { position: static; }
  .lb { grid-template-columns: 40px 1fr 40px; }
}
@media (max-width: 420px) {
  .grid-home, .grid-4 { gap: 12px; }
  .card-tx { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}