/* ============================================================
   IKI — ZenElegance · case study
   Dirección de arte propia dentro del sistema de pablomeyer.es.
   Carga después de base.css y project.css. Todo va bajo .ik
   para no tocar nada fuera de esta página.
   ============================================================ */

.ik {
  --ik-black: #000;
  --ik-white: #fff;
  --ik-paper: #F3F2EF;
  --ik-paper-2: #E9E7E2;
  --ik-ink: #000;
  --ik-ink-2: #5E5E5C;          /* 6.4:1 sobre blanco */
  --ik-on-dark-2: rgba(255,255,255,0.64);
  --ik-hair: rgba(0,0,0,0.14);
  --ik-hair-dark: rgba(255,255,255,0.18);

  /* Paleta textil — solo en tejido, muestras y fondos puntuales */
  --deep-gray: #48555F;
  --slate-blue: #4E5166;
  --blue-gray: #7C90A0;
  --ashen-beige: #B5AA9D;
  --stone-gray: #B9B7A7;
  --charcoal-gray: #747274;

  --ik-mono: 'Cutive Mono', ui-monospace, 'Courier New', monospace;
  --ik-sans: var(--font);

  --ik-max: 1520px;
  --ik-m: clamp(20px, 4.4vw, 72px);    /* margen lateral */
  --ik-g: clamp(16px, 1.7vw, 28px);    /* medianil */
  --ik-sec: clamp(96px, 12vw, 200px);  /* aire entre bloques */
  --ik-ease: cubic-bezier(0.22, 1, 0.36, 1);

  background: var(--ik-white);
  color: var(--ik-ink);
  font-family: var(--ik-sans);
}

.ik *, .ik *::before, .ik *::after { box-sizing: border-box; }
.ik section { padding: 0; }            /* anula el padding genérico de base.css */
.ik img { width: 100%; height: auto; }
.ik figure { margin: 0; }

/* ---------- Retícula ---------- */
.ik-wrap { width: 100%; max-width: var(--ik-max); margin-inline: auto; padding-inline: var(--ik-m); }
.ik-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ik-g); }
@media (max-width: 1024px) { .ik-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ik-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ik .ik-sec { padding-block: var(--ik-sec); }
.ik-dark { background: var(--ik-black); color: var(--ik-white); }
.ik-paper { background: var(--ik-paper); }

/* ---------- Tipografía ---------- */
.ik-mono { font-family: var(--ik-mono); }
.ik-label {
  font-family: var(--ik-mono); font-size: 13px; line-height: 1.5;
  letter-spacing: 0.02em; color: var(--ik-ink-2);
}
.ik-dark .ik-label { color: var(--ik-on-dark-2); }

/* Índice de sección: discreto, siempre igual */
.ik-idx {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--ik-mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--ik-ink-2); text-transform: uppercase;
}
.ik-idx::after { content: ""; flex: 1; height: 1px; background: var(--ik-hair); transform: translateY(-4px); }
.ik-dark .ik-idx { color: var(--ik-on-dark-2); }
.ik-dark .ik-idx::after { background: var(--ik-hair-dark); }

.ik-h2 {
  font-family: var(--ik-sans); font-weight: 300;
  font-size: clamp(34px, 4.6vw, 76px); line-height: 1.02; letter-spacing: -0.035em;
  text-wrap: balance;
}
.ik-h2 em { font-style: normal; font-family: var(--ik-mono); font-size: 0.92em; letter-spacing: -0.04em; }
.ik-p { font-size: 17px; line-height: 1.6; color: var(--ik-ink-2); max-width: 40ch; text-wrap: pretty; }
.ik-dark .ik-p { color: var(--ik-on-dark-2); }

.ik-head { row-gap: 28px; margin-bottom: clamp(48px, 6vw, 96px); }
.ik-head .ik-idx { grid-column: 1 / -1; margin-bottom: clamp(28px, 4vw, 64px); }
.ik-head .ik-h2 { grid-column: 1 / span 7; }
.ik-head .ik-p  { grid-column: 9 / span 4; align-self: end; }
@media (max-width: 1024px) {
  .ik-head .ik-h2 { grid-column: 1 / span 7; }
  .ik-head .ik-p  { grid-column: 1 / span 6; }
}
@media (max-width: 640px) { .ik-head .ik-h2, .ik-head .ik-p { grid-column: 1 / -1; } }

/* Pie de figura */
.ik figcaption, .ik-cap {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 12px; font-family: var(--ik-mono); font-size: 13px; line-height: 1.45;
  color: var(--ik-ink-2);
}
.ik-dark figcaption, .ik-dark .ik-cap { color: var(--ik-on-dark-2); }
.ik figcaption span:last-child { text-align: right; }
.ik figcaption { flex-wrap: wrap; column-gap: 16px; row-gap: 2px; }
@media (max-width: 640px) { .ik figcaption, .ik-cap { font-size: 12px; } .ik-ad figcaption span:last-child, .ik-tp figcaption span:last-child { display: none; } }

/* Imagen con recorte controlado */
.ik-media { position: relative; overflow: hidden; background: var(--ik-paper-2); }
.ik-media img, .ik-media picture { display: block; width: 100%; height: 100%; }
.ik-media img { object-fit: cover; }
.ik-dark .ik-media { background: #151515; }

/* Logo SVG */
.ik-logo { display: block; width: 100%; height: auto; fill: currentColor; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Movimiento — solo si hay JS y el usuario no pide menos movimiento
   ============================================================ */
.js .ik-rv { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ik-ease), transform 0.9s var(--ik-ease); }
.js .ik-rv.is-in { opacity: 1; transform: none; }
.js .ik-mask { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ik-ease); }
.js .ik-mask img { transform: scale(1.06); transition: transform 1.6s var(--ik-ease); }
.js .ik-mask.is-in { clip-path: inset(0 0 0 0); }
.js .ik-mask.is-in img { transform: none; }
.ik-d1 { transition-delay: 0.08s !important; }
.ik-d2 { transition-delay: 0.16s !important; }
.ik-d3 { transition-delay: 0.24s !important; }

@media (hover: hover) {
  .ik-zoom { overflow: hidden; }
  .ik-zoom img { transition: transform 1.1s var(--ik-ease); }
  .ik-zoom:hover img { transform: scale(1.025); }
}

/* ============================================================
   01 · HERO
   ============================================================ */
.ik-hero {
  display: grid; grid-template-columns: 5fr 7fr;
  min-height: 100vh; min-height: 100svh;
  background: var(--ik-black); color: var(--ik-white);
}
.ik-hero-panel {
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: 120px var(--ik-m) clamp(32px, 4vw, 56px);
}
/* margin-block auto: con solo titulo y pie, space-between subiria el logo
   arriba del todo; asi sigue centrado en su columna */
.ik-hero-title { margin: auto 0; width: min(100%, 460px); overflow: hidden; }
.ik-hero-title .ik-logo { color: var(--ik-white); }
.ik-hero-foot { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.ik-hero-foot ul { list-style: none; display: grid; gap: 4px; }
.ik-hero-foot li { font-family: var(--ik-mono); font-size: 15px; color: var(--ik-white); }
.ik-hero-scroll { font-family: var(--ik-mono); font-size: 13px; color: var(--ik-on-dark-2); writing-mode: vertical-rl; letter-spacing: 0.08em; }

.ik-hero-media { position: relative; overflow: hidden; background: #BDBDBB; }
.ik-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
.ik-hero-media figcaption {
  position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 24px); margin: 0;
  color: rgba(0,0,0,0.62);
}

/* Entrada: la imagen se abre de derecha a izquierda, el logo sube desde su máscara */
@keyframes ik-open { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes ik-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes ik-rise { from { transform: translateY(104%); } to { transform: none; } }
@keyframes ik-fade { from { opacity: 0; } to { opacity: 1; } }
.js .ik-hero-media { animation: ik-open 1.25s var(--ik-ease) 0.1s both; }
.js .ik-hero-media img { animation: ik-settle 2.2s var(--ik-ease) 0.1s both; }
.js .ik-hero-title .ik-logo { animation: ik-rise 1.1s var(--ik-ease) 0.35s both; }
.js .ik-hero-foot { animation: ik-fade 1s ease 0.8s both; }

@media (max-width: 900px) {
  .ik-hero { grid-template-columns: 1fr; grid-template-rows: auto minmax(52svh, 1fr); }
  .ik-hero-panel { padding-top: 104px; gap: 36px; }
  .ik-hero-title { width: min(64%, 300px); }
  .ik-hero-scroll { display: none; }
  .js .ik-hero-media { animation-name: ik-fade; }
}

/* ============================================================
   02 · OVERVIEW
   ============================================================ */
.ik-ov-name { grid-column: 1 / span 4; font-family: var(--ik-mono); font-size: clamp(20px, 1.6vw, 26px); line-height: 1.3; }
.ik-ov-body { grid-column: 6 / span 7; }
.ik-ov-lead {
  font-size: clamp(24px, 2.35vw, 38px); line-height: 1.28; letter-spacing: -0.022em; font-weight: 400;
  text-wrap: pretty; max-width: 26ch;
}
.ik-ov-sub { margin-top: 28px; font-size: 18px; line-height: 1.6; color: var(--ik-ink-2); max-width: 44ch; }
.ik-ov-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--ik-g);
  margin-top: clamp(56px, 7vw, 112px); padding-top: 20px; border-top: 1px solid var(--ik-hair);
}
.ik-ov-meta dt { font-family: var(--ik-mono); font-size: 13px; color: var(--ik-ink-2); margin-bottom: 8px; }
.ik-ov-meta dd { margin: 0; font-size: 15px; line-height: 1.45; }
@media (max-width: 1024px) {
  .ik-ov-name { grid-column: 1 / -1; margin-bottom: 32px; }
  .ik-ov-body { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .ik-ov-meta { grid-template-columns: 1fr 1fr; row-gap: 24px; } }

/* ============================================================
   03 · LA IDEA — IKI → 粋 → Understated elegance
   Sticky solo con JS y sin reduced-motion. Si no, se apilan.
   ============================================================ */
.ik-idea { position: relative; background: var(--ik-white); }
.ik-idea-stick {
  position: relative; display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(96px, 10vw, 140px) var(--ik-m) clamp(32px, 4vw, 56px);
  max-width: var(--ik-max); margin-inline: auto;
}
.ik-idea-stage { display: grid; place-items: center; min-height: 60vh; }
.ik-idea-layer { grid-area: 1 / 1; display: grid; place-items: center; text-align: center; }
.ik-idea-mark { width: min(56vw, 760px); color: var(--ik-black); }
.ik-idea-kanji {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  font-weight: 400; font-size: min(52vh, 40vw); line-height: 1; color: var(--ik-black);
}
.ik-idea-words { font-family: var(--ik-mono); font-size: clamp(34px, 6.4vw, 104px); line-height: 1.02; letter-spacing: -0.03em; }
.ik-idea-foot { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--ik-g); align-items: end; }
.ik-idea-foot .ik-p { grid-column: 1 / span 4; color: var(--ik-ink); max-width: 36ch; }
.ik-idea-steps { grid-column: 10 / span 3; justify-self: end; display: flex; gap: 18px; list-style: none; }
.ik-idea-steps li { font-family: var(--ik-mono); font-size: 13px; color: var(--ik-ink-2); transition: color 0.4s; }
.ik-idea-steps li.on { color: var(--ik-black); }

/* Estado estático (sin JS / reduced motion): tres bloques uno bajo otro */
.ik-idea:not(.is-live) .ik-idea-stage { display: flex; flex-direction: column; gap: clamp(48px, 8vw, 120px); padding-block: 40px; }
.ik-idea:not(.is-live) .ik-idea-steps { display: none; }

.ik-idea.is-live { height: 320vh; }
.ik-idea.is-live .ik-idea-stick { position: sticky; top: 0; height: 100vh; height: 100svh; }
.ik-idea.is-live .ik-idea-stage { min-height: 0; }
.ik-idea.is-live .ik-idea-layer {
  opacity: 0; transform: scale(0.985); filter: blur(8px);
  transition: opacity 0.9s var(--ik-ease), transform 1.2s var(--ik-ease), filter 0.9s var(--ik-ease);
}
.ik-idea.is-live[data-step="0"] .ik-idea-layer:nth-child(1),
.ik-idea.is-live[data-step="1"] .ik-idea-layer:nth-child(2),
.ik-idea.is-live[data-step="2"] .ik-idea-layer:nth-child(3) { opacity: 1; transform: none; filter: none; }

@media (max-width: 1024px) {
  .ik-idea-foot { grid-template-columns: 1fr auto; }
  .ik-idea-foot .ik-p { grid-column: 1; }
  .ik-idea-steps { grid-column: 2; }
}
@media (max-width: 640px) {
  .ik-idea-mark { width: 74vw; }
  .ik-idea-kanji { font-size: 62vw; }
  .ik-idea.is-live { height: 260vh; }
  .ik-idea-foot { grid-template-columns: 1fr; }
  .ik-idea-steps { justify-self: start; grid-column: 1; }
}

/* ============================================================
   04 · PILARES
   ============================================================ */
.ik-pillars-list { list-style: none; border-top: 1px solid var(--ik-hair-dark); }
.ik-pillar {
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--ik-g);
  align-items: end; padding-block: clamp(36px, 4.4vw, 64px);
  border-bottom: 1px solid var(--ik-hair-dark);
}
.ik-pillar-n { grid-column: 1 / span 2; font-family: var(--ik-mono); font-size: 15px; color: var(--ik-on-dark-2); align-self: start; padding-top: 0.6em; }
.ik-pillar-t {
  grid-column: 3 / span 6; font-weight: 300; text-transform: uppercase;
  font-size: clamp(36px, 5.6vw, 96px); line-height: 0.95; letter-spacing: -0.035em;
  transition: transform 0.8s var(--ik-ease);
}
.ik-pillar-d { grid-column: 10 / span 3; font-size: 16px; line-height: 1.55; color: var(--ik-on-dark-2); transition: color 0.5s; }
@media (hover: hover) {
  .ik-pillar:hover .ik-pillar-t { transform: translateX(14px); }
  .ik-pillar:hover .ik-pillar-d { color: var(--ik-white); }
}
@media (max-width: 1024px) {
  .ik-pillar { grid-template-columns: repeat(8, minmax(0,1fr)); row-gap: 20px; }
  .ik-pillar-n { grid-column: 1 / span 1; }
  .ik-pillar-t { grid-column: 2 / -1; }
  .ik-pillar-d { grid-column: 2 / span 5; }
}
@media (max-width: 640px) {
  .ik-pillar { grid-template-columns: 1fr; }
  .ik-pillar-n, .ik-pillar-t, .ik-pillar-d { grid-column: 1; }
  .ik-pillar-n { padding-top: 0; }
}

/* ============================================================
   05 · SISTEMA DE LOGO
   ============================================================ */
.ik-logo-grid { row-gap: var(--ik-g); }
.ik-plate {
  position: relative; display: grid; place-items: center;
  background: var(--ik-paper); padding: clamp(24px, 3vw, 40px);
}
.ik-plate .ik-label { position: absolute; left: clamp(16px, 1.6vw, 24px); top: clamp(14px, 1.4vw, 20px); }
.ik-plate .ik-label--br { left: auto; top: auto; right: clamp(16px, 1.6vw, 24px); bottom: clamp(14px, 1.4vw, 20px); }
.ik-plate--main { grid-column: 1 / span 8; grid-row: span 2; aspect-ratio: 8 / 7; background: var(--ik-white); border: 1px solid var(--ik-hair); }
.ik-plate--main .ik-logo { width: 52%; }
.ik-plate--rev { grid-column: 9 / span 4; aspect-ratio: 4 / 3.4; background: var(--ik-black); color: var(--ik-white); }
.ik-plate--rev .ik-label { color: var(--ik-on-dark-2); }
.ik-plate--rev .ik-logo { width: 42%; }
.ik-plate--mark { grid-column: 9 / span 4; aspect-ratio: 4 / 3.4; }
.ik-plate--mark .ik-logo { width: 38%; }

.ik-plate--space { grid-column: 1 / span 6; aspect-ratio: 1 / 1; background: var(--ik-white); border: 1px solid var(--ik-hair); }
.ik-plate--space > svg { width: 78%; height: auto; }
.ik-plate--min { grid-column: 7 / span 6; aspect-ratio: 1 / 1; background: var(--ik-paper); }
.ik-min { display: flex; align-items: flex-end; gap: clamp(40px, 6vw, 96px); }
.ik-min figure { display: grid; justify-items: center; gap: 14px; }
.ik-min .ik-rule { width: 100%; height: 1px; background: var(--ik-black); position: relative; }
.ik-min .ik-rule::before, .ik-min .ik-rule::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--ik-black); }
.ik-min .ik-rule::before { left: 0; } .ik-min .ik-rule::after { right: 0; }
.ik-min .ik-min-cap { margin: 0; display: block; text-align: center; color: var(--ik-black); font-family: var(--ik-mono); font-size: 13px; }

.ik-misuse { margin-top: clamp(56px, 7vw, 104px); }
.ik-misuse > .ik-label { grid-column: 1 / -1; margin-bottom: 16px; display: block; }
.ik-misuse figure { grid-column: span 3; }
.ik-misuse .ik-plate { aspect-ratio: 16 / 9; padding: 0; background: var(--ik-paper); overflow: hidden; }
.ik-misuse .ik-logo { width: 30%; opacity: 0.8; }
.ik-misuse figcaption { margin-top: 8px; }
.ik-mu-rot .ik-logo { transform: rotate(-14deg); }
.ik-mu-col .ik-logo { color: var(--blue-gray); }
.ik-mu-out .ik-logo { fill: none; stroke: var(--ik-black); stroke-width: 1.2; }
.ik-mu-str .ik-logo { transform: scaleX(1.5); width: 26%; }

@media (max-width: 1024px) {
  .ik-plate--main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .ik-plate--rev, .ik-plate--mark { grid-column: span 4; }
  .ik-plate--space, .ik-plate--min { grid-column: span 4; }
  .ik-misuse figure { grid-column: span 4; }
}
@media (max-width: 640px) {
  .ik-plate--rev, .ik-plate--mark, .ik-plate--space, .ik-plate--min { grid-column: 1 / -1; }
  .ik-plate--main .ik-logo { width: 60%; }
  .ik-misuse figure { grid-column: span 2; }
}

/* ============================================================
   06 · TIPOGRAFÍA
   ============================================================ */
.ik-type-aa {
  grid-column: 1 / span 6; font-family: var(--ik-mono);
  font-size: clamp(180px, 30vw, 520px); line-height: 0.78; letter-spacing: -0.06em;
  align-self: start; margin-left: -0.04em;
}
.ik-type-side { grid-column: 8 / span 5; display: grid; align-content: start; gap: 32px; }
.ik-type-name { font-family: var(--ik-mono); font-size: clamp(30px, 3vw, 48px); letter-spacing: -0.02em; line-height: 1; }
.ik-type-quote { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.45; letter-spacing: -0.01em; max-width: 34ch; }
.ik-scale { border-top: 1px solid var(--ik-hair); }
.ik-scale div { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; align-items: baseline; padding-block: 20px; border-bottom: 1px solid var(--ik-hair); }
.ik-scale dt { font-family: var(--ik-mono); font-size: 13px; line-height: 1.5; color: var(--ik-ink-2); }
.ik-scale dd { margin: 0; font-family: var(--ik-mono); }
.ik-scale .s-display { font-size: clamp(30px, 2.9vw, 42px); letter-spacing: -0.03em; line-height: 1.05; }
.ik-scale .s-body { font-size: 16px; letter-spacing: -0.03em; line-height: 1.5; }
.ik-charset {
  grid-column: 1 / -1; margin-top: clamp(64px, 8vw, 128px); padding-top: 24px; border-top: 1px solid var(--ik-hair);
  font-family: var(--ik-mono); font-size: clamp(18px, 4.1vw, 68px); line-height: 1.2; letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.ik-charset p + p { margin-top: 0.1em; }
.ik-charset .dim { color: var(--ik-ink-2); }
@media (max-width: 1024px) {
  .ik-type-aa { grid-column: 1 / -1; font-size: 44vw; margin-bottom: 40px; }
  .ik-type-side { grid-column: 1 / -1; }
}

/* ============================================================
   07 · COLOR / MATERIAL
   ============================================================ */
.ik-core { display: grid; grid-template-columns: 1fr 1fr; min-height: min(64vh, 640px); }
.ik-core > div { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(24px, 3vw, 48px) var(--ik-m); }
.ik-core-black { background: var(--ik-black); color: var(--ik-white); }
.ik-core-white { background: var(--ik-white); border-block: 1px solid var(--ik-hair); }
.ik-core-name { font-family: var(--ik-mono); font-size: clamp(28px, 3.4vw, 56px); letter-spacing: -0.03em; }
.ik-core dl { font-family: var(--ik-mono); font-size: 13px; line-height: 1.7; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; }
.ik-core dt { opacity: 0.6; }
.ik-core dd { margin: 0; }

.ik-textile { row-gap: var(--ik-g); margin-top: clamp(80px, 10vw, 160px); }
.ik-textile-photo { grid-column: 1 / span 5; }
.ik-textile-photo .ik-media { aspect-ratio: 4 / 5.4; }
.ik-textile-photo img { object-position: 50% 62%; }
.ik-textile-side { grid-column: 7 / span 6; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.ik-swatches { display: flex; gap: 6px; height: clamp(360px, 38vw, 560px); list-style: none; }
.ik-swatch {
  flex: 1 1 0; min-width: 0; position: relative; background: var(--c);
  transition: flex-grow 0.8s var(--ik-ease);
}
.ik-swatch span {
  position: absolute; left: 10px; right: 10px; bottom: 12px;
  font-family: var(--ik-mono); font-size: 12px; line-height: 1.45; color: #fff;
}
.ik-swatch.is-light span { color: #1a1a1a; }
.ik-swatch strong { display: block; font-weight: 400; margin-bottom: 4px; }
@media (hover: hover) { .ik-swatch:hover { flex-grow: 1.9; } }
@media (max-width: 1024px) {
  .ik-core { grid-template-columns: 1fr; }
  .ik-core > div { min-height: 280px; }
  .ik-textile-photo { grid-column: 1 / span 4; }
  .ik-textile-side { grid-column: 5 / span 4; }
  .ik-swatches { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
  .ik-swatch { aspect-ratio: 1 / 1.1; }
}
@media (max-width: 640px) {
  .ik-textile-photo, .ik-textile-side { grid-column: 1 / -1; }
  .ik-swatches { grid-template-columns: 1fr 1fr 1fr; }
  .ik-swatch { aspect-ratio: 3 / 4.2; }
  .ik-swatch span { font-size: 11px; left: 8px; right: 6px; }
}

/* ============================================================
   08 · DIRECCIÓN DE ARTE
   ============================================================ */
.ik-principles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin-top: 8px; }
.ik-principles li { font-family: var(--ik-mono); font-size: 15px; }
.ik-principles li::before { content: "— "; color: var(--ik-ink-2); }

.ik-ad { row-gap: clamp(40px, 5vw, 80px); }
.ik-ad-a { grid-column: 1 / span 8; }
.ik-ad-a .ik-media { aspect-ratio: 3 / 2; }
.ik-ad-b { grid-column: 10 / span 3; align-self: end; }
.ik-ad-b .ik-media { aspect-ratio: 4 / 5; }
.ik-ad-c { grid-column: 2 / span 3; }
.ik-ad-d { grid-column: 6 / span 3; margin-top: clamp(80px, 12vw, 200px); }
.ik-ad-e { grid-column: 10 / span 3; margin-top: clamp(24px, 4vw, 64px); }
.ik-ad-c .ik-media, .ik-ad-d .ik-media, .ik-ad-e .ik-media { aspect-ratio: 3 / 4.6; }
.ik-ad-note { grid-column: 2 / span 5; }
@media (max-width: 1024px) {
  .ik-ad-a { grid-column: 1 / -1; }
  .ik-ad-b { grid-column: 5 / span 4; }
  .ik-ad-c { grid-column: 1 / span 4; }
  .ik-ad-d { grid-column: 5 / span 4; margin-top: 80px; }
  .ik-ad-e { grid-column: 1 / span 4; margin-top: 0; }
  .ik-ad-note { grid-column: 5 / span 4; align-self: end; }
}
@media (max-width: 640px) {
  .ik-ad-b { grid-column: 2 / span 3; }
  .ik-ad-c { grid-column: 1 / span 2; }
  .ik-ad-d { grid-column: 3 / span 2; margin-top: 64px; }
  .ik-ad-e { grid-column: 1 / span 2; }
  .ik-ad-note { grid-column: 3 / span 2; }
}

/* ============================================================
   09 · PUNTOS DE CONTACTO
   ============================================================ */
.ik-tp { row-gap: var(--ik-g); }
.ik-tp-lead { grid-column: 1 / -1; }
.ik-tp-lead .ik-media { aspect-ratio: 2001 / 1250; }
.ik-tp-lead img { object-position: 50% 45%; }
.ik-tp-tag { grid-column: 1 / span 5; grid-row: span 2; margin-top: clamp(40px, 6vw, 96px); }
.ik-tp-tag .ik-media { aspect-ratio: 4 / 5; }
.ik-tp-card { grid-column: 7 / span 6; margin-top: clamp(40px, 6vw, 96px); }
.ik-tp-card .ik-media { aspect-ratio: 1483 / 1113; }
.ik-tp-env { grid-column: 7 / span 3; }
.ik-tp-stk { grid-column: 10 / span 3; }
.ik-tp-env .ik-media, .ik-tp-stk .ik-media { aspect-ratio: 1 / 1; }

/* Etiqueta tejida construida en CSS */
.ik-woven {
  grid-column: 1 / span 5; display: flex; align-items: center; gap: 24px; margin-top: 8px;
}
.ik-woven-label {
  flex: 0 0 auto; width: 112px; height: 50px; display: grid; place-items: center;
  background: #fbfaf7; color: #111;
  outline: 1px dashed rgba(0,0,0,0.28); outline-offset: -5px;
  border: 1px solid var(--ik-hair);
}
.ik-woven-label svg { width: 44px; height: auto; fill: currentColor; }
@media (max-width: 1024px) {
  .ik-tp-tag { grid-column: 1 / span 4; grid-row: auto; }
  .ik-tp-card { grid-column: 5 / span 4; align-self: end; }
  .ik-tp-env { grid-column: 1 / span 4; }
  .ik-tp-stk { grid-column: 5 / span 4; }
  .ik-woven { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ik-tp-tag, .ik-tp-card { grid-column: 1 / -1; }
  .ik-tp-card { margin-top: 0; }
  .ik-tp-env { grid-column: 1 / span 2; }
  .ik-tp-stk { grid-column: 3 / span 2; }
}

/* ============================================================
   10 · PACKAGING
   ============================================================ */
.ik-pack { background: var(--ik-paper); }
.ik-pk { row-gap: clamp(40px, 5vw, 80px); }
.ik-pk-a { grid-column: 1 / span 7; }
.ik-pk-a .ik-media { aspect-ratio: 1483 / 1063; }
.ik-pk-b { grid-column: 9 / span 4; margin-top: clamp(80px, 12vw, 200px); }
.ik-pk-b .ik-media { aspect-ratio: 4 / 5; }
.ik-pk-die { grid-column: 1 / span 5; background: var(--ik-white); padding: clamp(20px, 3vw, 44px); }
.ik-pk-die img { width: 100%; height: auto; }
.ik-pk-text { grid-column: 7 / span 5; align-self: center; display: grid; gap: 24px; }
.ik-pk-text .ik-h2 { font-size: clamp(32px, 3.6vw, 58px); }
.ik-specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; font-family: var(--ik-mono); font-size: 14px; padding-top: 18px; border-top: 1px solid var(--ik-hair); }
.ik-specs dt { color: var(--ik-ink-2); }
.ik-specs dd { margin: 0; }
.ik-pk-c { grid-column: 1 / span 6; }
.ik-pk-d { grid-column: 7 / span 6; }
.ik-pk-c .ik-media { aspect-ratio: 1483 / 910; }
.ik-pk-d .ik-media { aspect-ratio: 1483 / 910; }
@media (max-width: 1024px) {
  .ik-pk-a { grid-column: 1 / -1; }
  .ik-pk-b { grid-column: 3 / span 6; margin-top: 0; }
  .ik-pk-die, .ik-pk-text, .ik-pk-c, .ik-pk-d { grid-column: 1 / -1; }
}

/* ============================================================
   11 · CAMPAÑA — carteles construidos, misma familia
   ============================================================ */
.ik-camp { row-gap: 48px; align-items: start; }
.ik-camp figure { grid-column: span 4; }
.ik-camp figure:nth-child(2) { margin-top: clamp(40px, 7vw, 120px); }
.ik-camp figure:nth-child(3) { margin-top: clamp(20px, 3.5vw, 60px); }
.ik-camp figure, .ik-ed-cover, .ik-post, .ik-dg-mobile { container-type: inline-size; }
.ik-poster {
  container-type: inline-size; position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; padding: 6cqw;
  color: var(--ik-black); background: #EFEFED;
}
.ik-poster .p-logo { width: 22cqw; position: relative; z-index: 2; }
.ik-poster .p-logo svg { fill: currentColor; width: 100%; height: auto; display: block; }
.ik-poster .p-head {
  position: relative; z-index: 2; align-self: end;
  font-family: var(--ik-mono); text-transform: uppercase; font-size: 11cqw; line-height: 0.98; letter-spacing: -0.04em;
}
.ik-poster .p-foot {
  position: relative; z-index: 2; display: flex; justify-content: space-between; margin-top: 4cqw;
  font-family: var(--ik-mono); font-size: 3.1cqw; padding-top: 2.4cqw; border-top: 1px solid currentColor;
}
.ik-poster .p-img { position: absolute; z-index: 1; }
.ik-poster .p-img img { width: 100%; height: 100%; object-fit: cover; }

/* 01 — la figura ocupa el centro, texto abajo */
.ik-poster--1 { background: #E5E4E1; }
.ik-poster--1 .p-img { left: 18%; right: -4%; top: 4%; bottom: 22%; }
.ik-poster--1 .p-img img { object-fit: contain; object-position: 50% 0; }
/* 02 — gris piedra, ventana de tejido */
.ik-poster--2 { background: var(--stone-gray); }
.ik-poster--2 .p-img { left: 6cqw; right: 38%; top: 22%; aspect-ratio: 3 / 4; }
.ik-poster--2 .p-img img { object-position: 50% 30%; }
.ik-poster--2 .p-head { font-size: 11cqw; }
/* 03 — blanco, figura sentada y titular arriba */
.ik-poster--3 { background: #fff; grid-template-rows: auto auto 1fr auto; }
.ik-poster--3 .p-img { right: -6%; bottom: 7%; height: 72%; aspect-ratio: 1779 / 3318; }
.ik-poster--3 .p-img img { object-fit: contain; mix-blend-mode: multiply; }
.ik-poster--3 .p-head { align-self: start; margin-top: 5cqw; font-size: 12.5cqw; }
.ik-poster--3 .p-foot { grid-row: 4; }
@media (max-width: 1024px) {
  .ik-camp figure { grid-column: span 4; }
  .ik-camp figure:nth-child(3) { grid-column: 3 / span 4; margin-top: 0; }
}
@media (max-width: 640px) {
  .ik-camp figure, .ik-camp figure:nth-child(3) { grid-column: 1 / -1; margin-top: 0; }
  .ik-camp figure:nth-child(2) { margin-top: 0; }
}

/* ============================================================
   12 · EXTERIOR
   ============================================================ */
.ik-ooh { row-gap: clamp(40px, 5vw, 72px); align-items: end; }
.ik-ooh-flat { grid-column: 1 / span 4; }
.ik-ooh-flat .ik-media { aspect-ratio: 1296 / 1890; background: #fff; border: 1px solid var(--ik-hair); }
.ik-ooh-flat img { object-fit: contain; }
.ik-ooh-ctx { grid-column: 6 / span 7; }
.ik-ooh-ctx .ik-media { aspect-ratio: 2099 / 1400; }
.ik-ooh-night { grid-column: 9 / span 4; }
.ik-ooh-night .ik-media { aspect-ratio: 4 / 5; }
.ik-ooh-text { grid-column: 2 / span 5; align-self: center; display: grid; gap: 24px; }
@media (max-width: 1024px) {
  .ik-ooh-flat { grid-column: 1 / span 3; }
  .ik-ooh-ctx { grid-column: 4 / span 5; }
  .ik-ooh-text { grid-column: 1 / span 4; }
  .ik-ooh-night { grid-column: 5 / span 4; }
}
@media (max-width: 640px) {
  .ik-ooh-flat { grid-column: 1 / span 2; }
  .ik-ooh-ctx { grid-column: 1 / -1; }
  .ik-ooh-text { grid-column: 1 / -1; }
  .ik-ooh-night { grid-column: 3 / span 2; grid-row: 1; }
}

/* ============================================================
   13 · EDITORIAL — IKI Collection 01
   ============================================================ */
.ik-ed { row-gap: clamp(48px, 6vw, 96px); align-items: end; }
.ik-ed-cover { grid-column: 1 / span 4; }
.ik-ed-s1 { grid-column: 5 / span 8; }
.ik-ed-s2 { grid-column: 2 / span 10; }
.ik-page, .ik-spread { container-type: inline-size; background: #fff; color: var(--ik-black); position: relative; overflow: hidden; }
.ik-page { aspect-ratio: 210 / 297; }
.ik-cover { background: #EEEDED; }
.ik-spread { aspect-ratio: 420 / 297; display: grid; grid-template-columns: 1fr 1fr; }
.ik-spread::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(0,0,0,0.08); }
.ik-spread > div { position: relative; overflow: hidden; }

/* Portada */
.ik-cover { display: grid; grid-template-rows: auto 1fr auto; padding: 6cqw; }
.ik-cover .c-mast { width: 56%; position: relative; z-index: 1; }
.ik-cover > div:first-child { position: relative; z-index: 1; }
.ik-cover .c-mast svg { width: 100%; height: auto; display: block; fill: currentColor; }
.ik-cover .c-img { position: absolute; left: 18%; right: -8%; top: 40%; bottom: 0; }
.ik-cover .c-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.ik-cover .c-meta { display: flex; justify-content: space-between; font-family: var(--ik-mono); font-size: 3.4cqw; margin-top: 3cqw; }
.ik-cover .c-head { position: relative; z-index: 1; align-self: end; font-family: var(--ik-mono); font-size: 9cqw; line-height: 1; letter-spacing: -0.03em; }
.ik-cover .c-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; font-family: var(--ik-mono); font-size: 2.8cqw; margin-top: 3cqw; }

/* Páginas interiores */
.ik-pg { padding: 3cqw; display: grid; }
.ik-pg-full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik-pg-text { grid-template-rows: auto 1fr auto; padding: 3.2cqw 3.2cqw 2.6cqw; }
.ik-pg .run { display: flex; justify-content: space-between; font-family: var(--ik-mono); font-size: 1.15cqw; color: #555; }
.ik-pg .hd { font-family: var(--ik-mono); text-transform: uppercase; font-size: 4.1cqw; line-height: 1; letter-spacing: -0.04em; align-self: center; }
.ik-pg .cols { columns: 2; column-gap: 2cqw; font-family: var(--ik-mono); font-size: 1.05cqw; line-height: 1.55; color: #222; }
.ik-pg .cols p + p { margin-top: 0.8em; }
.ik-pg-quiet { grid-template-rows: 1fr auto; padding: 3.2cqw; }
.ik-pg-quiet .big { font-family: var(--ik-mono); font-size: 6.2cqw; line-height: 0.98; letter-spacing: -0.045em; align-self: end; }
.ik-pg-quiet .cap { font-family: var(--ik-mono); font-size: 1.15cqw; color: #555; margin-top: 2.2cqw; display: flex; justify-content: space-between; }
.ik-pg-duo { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 1.4cqw; padding: 3.2cqw; }
.ik-pg-duo .im { position: relative; overflow: hidden; }
.ik-pg-duo .im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik-pg-duo .im:first-child { margin-top: 5cqw; }
.ik-pg-duo .run { grid-column: 1 / -1; }
@media (max-width: 1024px) {
  .ik-ed-cover { grid-column: 1 / span 3; }
  .ik-ed-s1 { grid-column: 4 / span 5; }
  .ik-ed-s2 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ik-ed-cover { grid-column: 1 / span 3; }
  .ik-ed-s1, .ik-ed-s2 { grid-column: 1 / -1; }
}

/* ============================================================
   14 · DIGITAL
   ============================================================ */
.ik-dg { row-gap: clamp(48px, 6vw, 96px); }
.ik-browser { grid-column: 1 / -1; border: 1px solid var(--ik-hair); background: #fff; }
.ik-browser-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 38px; padding-inline: 14px;
  border-bottom: 1px solid var(--ik-hair); font-family: var(--ik-mono); font-size: 12px; color: var(--ik-ink-2);
}
.ik-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d9d8d4; display: inline-block; margin-right: 6px; }
.ik-browser-bar span:last-child { text-align: right; }
.ik-browser .ik-media { aspect-ratio: 1280 / 910; background: #fff; }

.ik-dg-detail { align-self: center; }
.ik-dg-detail { grid-column: 2 / span 5; }
.ik-dg-detail .ik-p { margin-top: 28px; }
.ik-dg-mobile { grid-column: 9 / span 3; }
.ik-phone {
  container-type: inline-size; position: relative; aspect-ratio: 390 / 800;
  border-radius: clamp(28px, 13%, 48px) / clamp(28px, 6.3%, 48px); padding: 9px; background: #111;
}
.ik-phone-tabs { align-self: end; display: flex; justify-content: space-around; padding: 4cqw 6cqw 7cqw; border-top: 1px solid rgba(0,0,0,0.1); font-family: var(--ik-mono); font-size: 3.4cqw; color: #333; }
.ik-phone-screen { position: relative; height: 100%; border-radius: clamp(20px, 11%, 40px) / clamp(20px, 5.4%, 40px); overflow: hidden; background: #fff; display: grid; grid-template-rows: auto auto auto auto 1fr; }
.ik-phone-bar { display: flex; justify-content: space-between; align-items: center; padding: 11cqw 6cqw 4cqw; }
.ik-phone-bar svg { width: 16cqw; height: auto; fill: #000; }
.ik-phone-bar span { font-family: var(--ik-mono); font-size: 3.6cqw; }
.ik-phone-hero { position: relative; aspect-ratio: 1 / 0.96; overflow: hidden; background: #cfcac6; }
.ik-phone-hero img { position: absolute; width: 246%; max-width: none; height: auto; left: -75%; top: -19%; }
.ik-phone-row { display: flex; justify-content: space-between; align-items: center; padding: 5cqw 6cqw 3cqw; font-family: var(--ik-mono); font-size: 4cqw; }
.ik-phone-row b { font-weight: 400; background: #000; color: #fff; padding: 0.3em 0.7em; font-size: 3.4cqw; }
.ik-phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding: 0 6cqw; }
.ik-phone-grid div { position: relative; aspect-ratio: 3 / 3.4; overflow: hidden; background: #ddd; }
.ik-phone-grid img { position: absolute; max-width: none; width: 711%; height: auto; top: -344%; }
.ik-phone-grid div:nth-child(1) img { left: -120%; }
.ik-phone-grid div:nth-child(2) img { left: -304%; }
.ik-dg-tab { grid-column: 4 / span 9; }
.ik-dg-tab .ik-media { aspect-ratio: 2104 / 1400; }
.ik-dg-tabtext { grid-column: 1 / span 3; align-self: end; }
@media (max-width: 1024px) {
  .ik-dg-detail { grid-column: 1 / span 5; }
  .ik-dg-mobile { grid-column: 6 / span 3; }
  .ik-dg-tab { grid-column: 1 / -1; }
  .ik-dg-tabtext { grid-column: 1 / span 5; }
}
@media (max-width: 640px) {
  .ik-dg-detail { grid-column: 1 / -1; }
  .ik-dg-mobile { grid-column: 2 / span 2; }
  .ik-browser-bar { font-size: 11px; }
}

/* ============================================================
   15 · SOCIAL
   ============================================================ */
.ik-social { row-gap: var(--ik-g); }
.ik-post { grid-column: span 4; }
.ik-post-in { container-type: inline-size; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ik-paper-2); }
.ik-post-in > img, .ik-post-in picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ik-post-type { background: #000; color: #fff; display: grid; grid-template-rows: auto 1fr auto; padding: 8cqw; }
.ik-post-type .t { font-family: var(--ik-mono); font-size: 13cqw; line-height: 1; letter-spacing: -0.04em; align-self: center; }
.ik-post-type svg, .ik-post-note svg { width: 16cqw; height: auto; fill: currentColor; }
.ik-post-type small, .ik-post-note small { font-family: var(--ik-mono); font-size: 3.6cqw; }
.ik-post-note { background: var(--ashen-beige); color: #111; display: grid; grid-template-rows: auto 1fr auto; padding: 8cqw; }
.ik-post-note .t { font-family: var(--ik-mono); font-size: 9cqw; line-height: 1.12; letter-spacing: -0.03em; align-self: end; }
.ik-post-tag { position: absolute; left: 6cqw; bottom: 6cqw; z-index: 1; font-family: var(--ik-mono); font-size: 3.6cqw; background: #000; color: #fff; padding: 0.35em 0.7em; }
.ik-social-ctx { margin-top: clamp(64px, 8vw, 128px); row-gap: 32px; align-items: center; }
.ik-social-ctx figure { grid-column: 6 / span 7; }
.ik-social-ctx figure .ik-media { aspect-ratio: 16 / 10; }
.ik-social-ctx img { object-position: 50% 60%; }
.ik-social-ctx .ik-p { grid-column: 1 / span 4; }
@media (max-width: 1024px) {
  .ik-post { grid-column: span 4; }
  .ik-social-ctx figure { grid-column: 1 / -1; }
  .ik-social-ctx .ik-p { grid-column: 1 / span 6; }
}
@media (max-width: 640px) { .ik-post { grid-column: span 2; } }

/* ============================================================
   16 · CIERRE
   ============================================================ */
.ik-close { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; color: #fff; background: #111; display: grid; }
.ik-close-img { position: absolute; inset: -6% 0; }
.ik-close-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(0.62); }
.ik-close-in {
  position: relative; z-index: 1; display: grid; grid-template-rows: 1fr auto; align-items: center;
  padding: clamp(96px, 10vw, 160px) var(--ik-m) clamp(28px, 3.4vw, 48px);
  max-width: var(--ik-max); width: 100%; margin-inline: auto;
}
.ik-close-logo { width: min(46vw, 440px); justify-self: center; }
.ik-close-logo .ik-logo { color: #fff; }
.ik-close-foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-family: var(--ik-mono); font-size: 14px; color: rgba(255,255,255,0.78); border-top: 1px solid rgba(255,255,255,0.28); padding-top: 18px; }
@media (max-width: 640px) { .ik-close-logo { width: 62vw; } }

/* ---------- Siguiente proyecto: se hereda de project.css ---------- */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .ik-rv, .js .ik-mask, .js .ik-mask img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .ik-hero-media, .js .ik-hero-media img, .js .ik-hero-title .ik-logo, .js .ik-hero-foot { animation: none !important; }
  .ik-close-img { inset: 0; }
}

/* ---------- Pantallas grandes (> 1440): ver base.css ----------
   La reticula de 12 columnas se abre hasta 2400 px con margen
   proporcional; los cuerpos de texto conservan su medida en ch. */
@media (min-width: 1441px) {
  .ik {
    --ik-max: 2400px;
    --ik-m: min(calc(72px + (100vw - 1440px) * 0.05), 128px);
    --ik-g: min(calc(28px + (100vw - 1440px) * 0.0097), 42px);
    --ik-sec: min(calc(200px + (100vw - 1440px) * 0.0694), 300px);
  }
  .ik-h2 { font-size: min(calc(76px + (100vw - 1440px) * 0.0264), 114px); }
  .ik-ov-name { font-size: min(calc(26px + (100vw - 1440px) * 0.009), 39px); }
  .ik-ov-lead { font-size: min(calc(38px + (100vw - 1440px) * 0.0132), 57px); }
  .ik-idea-words { font-size: min(calc(104px + (100vw - 1440px) * 0.0361), 156px); }
  .ik-pillar-t { font-size: min(calc(96px + (100vw - 1440px) * 0.0333), 144px); }
  .ik-type-aa { font-size: min(calc(520px + (100vw - 1440px) * 0.1806), 780px); }
  .ik-type-name { font-size: min(calc(48px + (100vw - 1440px) * 0.0167), 72px); }
  .ik-scale .s-display { font-size: min(calc(42px + (100vw - 1440px) * 0.0146), 63px); }
  .ik-charset { font-size: min(calc(68px + (100vw - 1440px) * 0.0236), 102px); }
  .ik-core-name { font-size: min(calc(56px + (100vw - 1440px) * 0.0194), 84px); }
  .ik-pk-text .ik-h2 { font-size: min(calc(58px + (100vw - 1440px) * 0.0201), 87px); }
  .ik-idea-mark { width: min(56vw, calc(760px + (100vw - 1440px) * 0.264), 1140px); }
  .ik-close-logo { width: min(46vw, calc(440px + (100vw - 1440px) * 0.153), 660px); }
}