/* Diraspi — detalle de obra (obra.html). Todo bajo prefijo .od- / .od-m- ; no toca site.css.
   Ley de color: tinta navy · hover turquesa · duotono navy que revela color, como las franjas. */

/* ——— PÁGINA ——— */
.od{padding:118px 48px 64px}
/* padding vertical: área táctil ≥44px sin cambiar el visual */
.od-back{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--ink-3);text-decoration:none;transition:color .3s ease;padding:15px 0;margin:-15px 0}
.od-back:hover{color:var(--tur)}

/* ——— ENCABEZADO ——— */
.od-head{position:relative;margin:38px 0 40px;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both}
.od-year{position:absolute;right:0;top:-14px;font-family:var(--mont);font-weight:800;font-size:clamp(72px,10vw,148px);line-height:1;letter-spacing:-.02em;color:rgba(0,48,87,.09);pointer-events:none;user-select:none}
.od-kicker{display:flex;align-items:center;gap:12px}
.od-tick{flex:none;width:30px;height:5px;background:var(--navy)}
.od-meta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-2)}
.od-title{margin:18px 0 0;font-family:var(--mont);font-weight:800;font-size:clamp(40px,5vw,72px);line-height:1.02;letter-spacing:-.01em;color:var(--navy);overflow-wrap:break-word;max-width:20ch}
.od-title.long{font-size:clamp(30px,3.2vw,46px);max-width:30ch}
.od-desc{margin:22px 0 0;max-width:640px;font-family:var(--inter);font-weight:300;font-size:15px;line-height:1.65;color:var(--ink-2)}
.od-link{margin-top:18px}

/* ——— MOSAICO ——— */
.od-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(180px,24vw,320px);gap:3px;grid-auto-flow:dense}
.od-ph{position:relative;margin:0;min-width:0;overflow:hidden;cursor:pointer;animation:riseIn .55s cubic-bezier(.22,1,.36,1) both}
.od-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transform:scale(1);transition:filter .45s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.od-ph-veil{position:absolute;inset:0;background:var(--navy);mix-blend-mode:color;opacity:.62;transition:opacity .45s ease}
.od-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(to top,rgba(2,20,38,.78),rgba(2,20,38,0));pointer-events:none}
.od-ph-idx{position:absolute;left:10px;bottom:8px;z-index:1;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;color:#fff;text-shadow:0 1px 3px rgba(2,20,38,.6)}
.od-ph:hover img{filter:grayscale(0);transform:scale(1.03)}
.od-ph:hover .od-ph-veil{opacity:0}
.od-ph:focus-visible{outline:2px solid var(--tur);outline-offset:2px}

/* spans editoriales por número de fotos — la primera siempre protagonista */
.od-g1 .od-ph{grid-column:span 8;grid-row:span 2}
.od-g2 .od-ph:nth-child(1){grid-column:span 12;grid-row:span 2}
.od-g2 .od-ph:nth-child(2){grid-column:span 12}
.od-g3 .od-ph:nth-child(1){grid-column:span 12;grid-row:span 2}
.od-g3 .od-ph:nth-child(2){grid-column:span 7}
.od-g3 .od-ph:nth-child(3){grid-column:span 5}
.od-g4 .od-ph:nth-child(1){grid-column:span 7;grid-row:span 2}
.od-g4 .od-ph:nth-child(2){grid-column:span 5;grid-row:span 2}
.od-g4 .od-ph:nth-child(3){grid-column:span 5}
.od-g4 .od-ph:nth-child(4){grid-column:span 7}
.od-g5 .od-ph:nth-child(1){grid-column:span 12;grid-row:span 2}
.od-g5 .od-ph:nth-child(2){grid-column:span 7}
.od-g5 .od-ph:nth-child(3){grid-column:span 5}
.od-g5 .od-ph:nth-child(4){grid-column:span 5}
.od-g5 .od-ph:nth-child(5){grid-column:span 7}
.od-g6 .od-ph:nth-child(1){grid-column:span 12;grid-row:span 2}
.od-g6 .od-ph:nth-child(2){grid-column:span 7}
.od-g6 .od-ph:nth-child(3){grid-column:span 5}
.od-g6 .od-ph:nth-child(4){grid-column:span 4}
.od-g6 .od-ph:nth-child(5){grid-column:span 4}
.od-g6 .od-ph:nth-child(6){grid-column:span 4}

/* ——— registro en movimiento ——— */
.od-vids{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;margin-top:3px}
.od-vids .od-ph{height:clamp(220px,30vw,400px)}
.od-vids video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .45s ease}
.od-vids .od-ph:hover video{filter:none}
@media (max-width:760px){.od-vids{grid-template-columns:1fr}}

/* ——— MODAL (mismo lenguaje que el lightbox de site.js, namespace propio) ——— */
.od-modal{position:fixed;inset:0;z-index:100;background:rgba(2,14,26,.94);display:flex;align-items:center;justify-content:center}
.od-modal[hidden]{display:none}
.od-m-inner{width:min(90vw,960px)}
.od-m-inner img{display:block;width:100%;max-height:82vh;object-fit:contain;background:#000}
.od-m-inner video{display:block;width:100%;max-height:82vh;background:#000}
.od-m-inner img[hidden],.od-m-inner video[hidden]{display:none}
.od-m-cap{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--tur-soft)}
.od-m-close{position:absolute;top:22px;right:26px;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font-size:14px;padding:8px 12px;min-width:44px;min-height:44px;cursor:pointer;z-index:2}
.od-m-close:hover{border-color:var(--tur);color:var(--tur)}
.od-m-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(2,24,46,.6);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:26px;line-height:1;padding:10px 14px;min-width:44px;min-height:44px;cursor:pointer;z-index:2}
.od-m-nav:hover{border-color:var(--tur);color:var(--tur)}
.od-m-prev{left:22px}
.od-m-next{right:22px}

/* ——— PAGER anterior / siguiente ——— */
.od-pager{display:flex;justify-content:space-between;gap:24px;margin-top:64px;border-top:1px solid rgba(0,48,87,.15);padding-top:22px}
/* padding 8 + margen -8: área táctil ≥44px aunque el nombre quepa en una línea (mismo patrón que .od-back) */
.od-pg{display:flex;flex-direction:column;gap:8px;min-width:0;text-decoration:none;padding:8px 0;margin:-8px 0}
.od-pg-next{align-items:flex-end;text-align:right;margin-left:auto}
.od-pg-lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-3)}
.od-pg-name{font-family:var(--mont);font-weight:800;font-size:clamp(16px,2vw,21px);line-height:1.15;color:var(--navy);transition:color .3s ease}
.od-pg:hover .od-pg-name{color:var(--tur)}

/* ——— RESPONSIVE ——— */
@media (max-width:760px){
  .od{padding:94px 20px 48px}
  .od-head{margin:26px 0 28px}
  .od-year{position:static;font-size:52px;color:rgba(0,48,87,.16);margin-top:10px}
  .od-kicker{align-items:flex-start}
  .od-tick{margin-top:4px}
  .od-meta{letter-spacing:.12em}
  .od-title{font-size:clamp(32px,9vw,44px)}
  .od-title.long{font-size:clamp(24px,7vw,32px)}
  .od-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,42vw,220px)}
  .od-grid .od-ph:nth-child(n){grid-column:auto/span 1;grid-row:auto/span 1}
  .od-grid .od-ph:first-child{grid-column:span 2}
  .od-grid .od-ph:nth-child(even):last-child{grid-column:span 2}
  .od-pager{flex-direction:column;gap:28px;margin-top:44px}
  .od-pg-next{margin-left:0}
  .od-m-prev{left:8px}
  .od-m-next{right:8px}
  .od-m-nav{padding:8px 11px;font-size:20px} /* min-width/height 44 siguen vigentes */
  .od-m-close{top:14px;right:14px}
}