@import url('/assets/css/image-framing-v1.css?v=20260815-framing1');

/* KROSS 2016 — capítulo documental */
.k16-doc{background:#f7f7f3;color:var(--ink);padding:clamp(84px,9vw,150px) 0 0}
.k16-doc-intro{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(42px,8vw,120px);align-items:start;padding-bottom:clamp(70px,9vw,130px)}
.k16-doc-marker{position:sticky;top:120px;padding-top:18px;border-top:1px solid var(--line)}
.k16-doc-marker span{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:850;color:var(--turquoise);margin-bottom:14px}
.k16-doc-marker strong{display:block;font-size:clamp(2rem,3vw,3.6rem);line-height:.94;letter-spacing:-.045em;max-width:360px}
.k16-doc-lead .event-v1-overline{margin-bottom:22px}
.k16-doc-lead h2{font-size:clamp(3.6rem,7vw,8rem);line-height:.84;letter-spacing:-.065em;margin:0 0 38px;max-width:980px}
.k16-doc-lead p{font-size:clamp(1.08rem,1.45vw,1.3rem);line-height:1.72;color:#4c4f55;max-width:800px;margin:0 0 24px}
.k16-doc-lead p:first-of-type{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,2.5vw,2.6rem);line-height:1.28;color:#303238}

.k16-doc-chapter{padding:clamp(72px,9vw,132px) 0;border-top:1px solid var(--line)}
.k16-doc-chapter-head{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(280px,.55fr);gap:clamp(24px,5vw,72px);align-items:start;margin-bottom:48px}
.k16-doc-index{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:850;color:var(--turquoise);padding-top:8px}
.k16-doc-chapter h3{font-size:clamp(2.9rem,5vw,6rem);line-height:.88;letter-spacing:-.055em;margin:0;max-width:780px}
.k16-doc-chapter-copy{font-size:1rem;line-height:1.65;color:#5d6066;margin:7px 0 0;max-width:500px}

.k16-doc-frames{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:120px;gap:12px}
.k16-doc-frame{margin:0;overflow:hidden;background:#d8d8d4;position:relative}
.k16-doc-frame img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02);transition:transform .45s ease,filter .45s ease}
.k16-doc-frame figcaption{position:absolute;left:16px;bottom:14px;background:rgba(10,11,17,.68);color:#fff;padding:7px 9px;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;backdrop-filter:blur(6px);z-index:2}
.k16-doc-frame[data-k16-photo]{cursor:zoom-in;outline:none}
.k16-doc-frame[data-k16-photo]::after{content:"＋";position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(10,11,17,.68);color:#fff;font-size:1rem;font-weight:500;line-height:1;backdrop-filter:blur(6px);z-index:2;opacity:.92;transition:transform .25s ease,background .25s ease}
.k16-doc-frame[data-k16-photo]:hover img{transform:scale(1.025);filter:saturate(1) contrast(1.03)}
.k16-doc-frame[data-k16-photo]:hover::after{transform:scale(1.08);background:rgba(10,11,17,.84)}
.k16-doc-frame[data-k16-photo]:focus-visible{box-shadow:inset 0 0 0 4px var(--turquoise)}
.k16-doc-frame--hero{grid-column:span 7;grid-row:span 4}
.k16-doc-frame--side{grid-column:span 5;grid-row:span 2}
.k16-doc-frame--side2{grid-column:span 5;grid-row:span 2}
.k16-doc-frame--third{grid-column:span 4;grid-row:span 3}
.k16-doc-frame--wide{grid-column:span 8;grid-row:span 3}
.k16-doc-frame--full{grid-column:1/-1;grid-row:span 3}

.k16-doc-bridge{background:#17191f;color:#fff;padding:clamp(90px,10vw,150px) 0}
.k16-doc-bridge-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.52fr);gap:clamp(48px,8vw,120px);align-items:end}
.k16-doc-bridge h2{font-size:clamp(3.7rem,7vw,8.2rem);line-height:.84;letter-spacing:-.065em;margin:0;max-width:900px}
.k16-doc-bridge h2 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#9ce5df}
.k16-doc-bridge-copy p{font-size:1.08rem;line-height:1.68;color:#c7c9cf;margin:0 0 24px}
.k16-doc-bridge-meta{display:flex;flex-wrap:wrap;gap:10px 18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;font-weight:800;color:#9fa2aa}
.k16-doc-bridge-meta strong{color:#fff}

@media(max-width:1000px){
  .k16-doc-intro,.k16-doc-bridge-grid{grid-template-columns:1fr}
  .k16-doc-marker{position:static;display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:start}
  .k16-doc-marker strong{max-width:none}
  .k16-doc-chapter-head{grid-template-columns:100px 1fr}
  .k16-doc-chapter-copy{grid-column:2}
  .k16-doc-frames{grid-auto-rows:105px}
}
@media(max-width:720px){
  .k16-doc{padding-top:70px}
  .k16-doc-intro{gap:40px;padding-bottom:72px}
  .k16-doc-marker{grid-template-columns:1fr;gap:4px}
  .k16-doc-marker strong{font-size:1.8rem}
  .k16-doc-chapter{padding:66px 0}
  .k16-doc-chapter-head{grid-template-columns:1fr;gap:12px;margin-bottom:30px}
  .k16-doc-index{padding-top:0}
  .k16-doc-chapter-copy{grid-column:1;margin-top:8px}
  .k16-doc-frames{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:7px}
  .k16-doc-frame--hero{grid-column:1/-1;grid-row:span 2}
  .k16-doc-frame--side,.k16-doc-frame--side2,.k16-doc-frame--third{grid-column:span 1;grid-row:span 1}
  .k16-doc-frame--third:nth-of-type(3){grid-column:1/-1;grid-row:span 2}
  .k16-doc-frame--wide,.k16-doc-frame--full{grid-column:1/-1;grid-row:span 2}
  .k16-doc-frame figcaption{font-size:.56rem;left:10px;bottom:10px}
  .k16-doc-frame[data-k16-photo]::after{right:10px;top:10px;width:32px;height:32px}
  .k16-doc-bridge{padding:78px 0}
}
@media(max-width:430px){
  .k16-doc-frames{grid-template-columns:1fr;grid-auto-rows:auto}
  .k16-doc-frame--hero,.k16-doc-frame--side,.k16-doc-frame--side2,.k16-doc-frame--third,.k16-doc-frame--wide,.k16-doc-frame--full,.k16-doc-frame--third:nth-of-type(3){grid-column:1;grid-row:auto;aspect-ratio:4/3}
}