:root {
  --papel: #ffffff;
  --gris: #ececec;
  --tinta: #000000;
  --sans: "Inter", "Helvetica Neue", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --barra: 36px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 11px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Espacios de imagen numerados ---------- */
.hueco { position: relative; display: block; overflow: hidden; background: var(--gris); }
.hueco > img, .hueco > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hueco.vacio {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,.03) 14px 28px),
    var(--gris);
  outline: 1px dashed rgba(0,0,0,.25); outline-offset: -10px;
}
.hueco.vacio::after {
  content: attr(data-num) "\A" attr(data-nombre);
  white-space: pre; text-align: center;
  font-family: var(--serif); font-size: clamp(28px, 4vw, 64px); line-height: 1;
  color: rgba(0,0,0,.45);
}

/* ---------- Barra superior ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--barra);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 14px;
  background: var(--papel);
  border-bottom: 1px solid rgba(0,0,0,.15);
  font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
}
.punto { width: 11px; height: 11px; border-radius: 50%; background: var(--tinta); }
.nombre { font-size: 13px; font-weight: 600; letter-spacing: .03em; }
.barra nav { justify-self: end; display: flex; gap: 26px; }
.barra nav a { position: relative; }
.barra nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .35s ease;
}
.barra nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Capas que se tapan unas a otras ---------- */
.capa { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.portada { z-index: 1; }
.grande  { z-index: 2; }
.negro-largo { position: relative; z-index: 3; height: 400vh; } /* 3 imágenes + 1 pantalla de cruce */
.mesa    { z-index: 4; margin-top: -100vh; }
.tipo    { position: relative; z-index: 5; }
.contacto{ position: relative; z-index: 6; }
/* tiempo que cada sección se queda quieta antes de que suba la siguiente */
.portada, .grande, .mesa { margin-bottom: 50vh; }

/* ---------- 1. Portada ---------- */
.portada {
  padding-top: var(--barra);
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--papel);
}
.portada .hueco { background-color: var(--papel); }
.portada .hueco > img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.portada .hueco:hover > img { transform: scale(1.03); }
.portada .hueco + .hueco { border-left: 1px solid rgba(0,0,0,.08); }

/* Portada con videos escalonados: recuadros blancos sobre negro, como la lámina de ejemplo */
.hueco.escalera { background: #fff; isolation: isolate; }
.escalera .escalon { position: absolute; transition: all .5s cubic-bezier(.2,.7,.2,1); }   /* sin recorte: la sombra nunca se corta */
.escalera .escalon video { width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(1.25); transform-origin: 50% 85%; mix-blend-mode: multiply; }   /* el blanco del video se funde con el fondo */
/* espacio alto: hacia abajo, alternando izquierda / derecha / izquierda */
.escalera .escalon:nth-child(1) { left: 0;     top: 0;     width: 82%; height: 33%; }
.escalera .escalon:nth-child(2) { left: 22.5%; top: 34.3%; width: 77.5%; height: 32.6%; }
.escalera .escalon:nth-child(3) { left: 0;     top: 68.2%; width: 74%; height: 31.8%; }
/* espacio ancho: hacia el lado, alternando arriba / abajo / arriba */
.escalera.al-lado .escalon:nth-child(1) { left: 0;     top: 0;     width: 33%;   height: 82%; }
.escalera.al-lado .escalon:nth-child(2) { left: 34.3%; top: 22.5%; width: 32.6%; height: 77.5%; }
.escalera.al-lado .escalon:nth-child(3) { left: 68.2%; top: 0;     width: 31.8%; height: 74%; }

/* ---------- 2. Imagen grande ---------- */
/* el video ocupa toda la pantalla (también bajo la barra): así no queda ninguna franja blanca
   cuando sube sobre la portada */
.grande { background: #111; }
.grande .hueco { position: absolute; inset: 0; background: #111; }
.grande .hueco > img, .grande .hueco > video { will-change: transform; }
.grande-indice {
  position: absolute; z-index: 2; left: 14px; top: calc(var(--barra) + 12vh);
  height: 72vh; list-style: none;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: .03em;
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45);      /* se lee sobre el video */
  pointer-events: none;
}
.grande-indice li small { display: block; font-size: 9px; opacity: .85; }
.grande-indice li span::before { content: "— "; }

/* ---------- 3. Bloque negro ---------- */
.negro {
  background: var(--tinta); color: #fff;
  display: grid; grid-template-columns: 1fr 1fr;
}
.negro-texto {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--barra) + 4vh) 24px 24px;
}
.negro-texto h1 {
  font-family: var(--serif); font-weight: 400; line-height: .92;
  font-size: clamp(48px, 7.5vw, 120px); letter-spacing: -.01em;
}
.negro-texto h1 em, .negro-texto h1 span { display: block; }
.negro-texto p { max-width: 230px; margin-top: 18px; line-height: 1.45; font-size: 10px; }
.iconos { display: flex; gap: 4px; margin-top: 12px; }
.iconos i { width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.codigo {
  position: absolute; bottom: 26px; width: 70px; height: 26px;
  background: repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 3px, #fff 3px 5px, transparent 5px 6px, #fff 6px 7px, transparent 7px 10px);
}
.negro-imagenes { position: relative; overflow: hidden; }
.negro-imagenes .hueco {
  position: absolute; inset: 0;
  clip-path: inset(38% 32% 38% 32%); opacity: 0;
  transition: clip-path .9s cubic-bezier(.65,0,.25,1), opacity .25s linear;
}
.negro-imagenes .hueco:first-child,
.negro-imagenes .hueco.visible { clip-path: inset(0 0 0 0); opacity: 1; }
.negro-imagenes .hueco > img { transform: scale(1.12); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.negro-imagenes .hueco.visible > img,
.negro-imagenes .hueco:first-child > img { transform: scale(1); }

/* ---------- 4. Mesa de objetos ---------- */
.mesa { background: #f6f6f6; padding: calc(var(--barra) + 12px) 14px 0; }
.mesa-texto {
  text-transform: uppercase; font-weight: 500; font-size: 10px; line-height: 1.35;
}
.mesa-objetos {
  position: absolute; left: 0; right: 0; bottom: 2.5vh; height: 72vh;   /* un poco de aire abajo: nada se corta */
}
.objeto {
  position: absolute; bottom: 0; z-index: 1;
  transition: transform .25s linear;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.12));
  transform-origin: 50% 100%;
  pointer-events: none;   /* solo se miran: no se aprietan ni crecen */
}
.objeto.detras { z-index: 0; }
.objeto > img { object-fit: contain; object-position: center bottom; }
.objeto.con-img { background: none; }
.objeto.vacio::after { font-size: clamp(20px, 2.4vw, 34px); }
/* posiciones del video: de izquierda a derecha */

/* ---------- 5. Contacto ---------- */
.contacto {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--barra) + 10px) 14px 14px;
  background: var(--gris);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -20px 50px rgba(0,0,0,.08);
}
.contacto-arriba { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; white-space: pre-line; line-height: 1.35; font-size: 10px; }
.contacto-img { width: 70px; height: 90px; background-color: transparent; }
.contacto-img.vacio { background-color: #d9d9d9; }
.contacto-img.vacio::after { font-size: 14px; }
.contacto-img > img { object-fit: contain; }
.contacto-abajo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.contacto h2 {
  font-family: var(--serif); font-weight: 400; line-height: .78;
  font-size: clamp(90px, 21vw, 340px); letter-spacing: -.035em;
}
.contacto h2 sup { font-family: var(--sans); font-size: .1em; vertical-align: top; position: relative; top: .9em; margin-left: .1em; }
/* Mismos botones que la página Contacto: gris, rectos, mismo ancho, con flecha */
.contacto-botones { display: inline-grid; gap: 4px; padding-bottom: .6vw; }
.contacto-botones a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #4a4a4a; color: #fff; border-radius: 5px;
  padding: 3px 10px; font-family: var(--sans); font-size: clamp(13px, 1.2vw, 18px);
  transition: background .25s;
}
.contacto-botones a i { font-style: normal; font-size: .7em; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.contacto-botones a:hover { background: #000; }
.contacto-botones a:hover i { transform: translate(2px, -2px); }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .barra { grid-template-columns: auto 1fr; gap: 10px; }
  .punto { display: none; }
  .barra nav { gap: 12px; font-size: 9px; }
  /* todos los botones siempre visibles, en una sola línea */
  .barra .nombre { white-space: nowrap; font-size: 12px; }
  .barra nav a { white-space: nowrap; }
  .portada { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .portada .hueco + .hueco { border-left: 0; border-top: 1px solid rgba(0,0,0,.08); }
  .grande-indice { font-size: 10px; height: 60vh; top: calc(var(--barra) + 14vh); }   /* en celular también se ve */
  .negro-texto { padding-left: 12px; padding-right: 12px; }
  .negro-texto h1 { font-size: clamp(30px, 10vw, 60px); }
  .codigo { display: none; }
  .mesa-objetos { height: 62vh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 5. Texto grande con lo que hago ---------- */
.tipo {
  background: #fff; min-height: 100vh;
  padding: calc(var(--barra) + 18px) 10px 60px;
  box-shadow: 0 -20px 50px rgba(0,0,0,.08);
  --grotesk: "Archivo", "Helvetica Neue", sans-serif;
}
.tipo-etiqueta { font-size: 9px; text-transform: uppercase; margin: 0 0 10px 4px; }
.tipo-lista {
  font-weight: 400;
  font-size: clamp(42px, 8.6vw, 160px);
  line-height: .98; letter-spacing: -.045em;
}
.palabra { position: relative; transition: opacity .25s; }
.palabra.sans  { font-family: var(--grotesk); font-weight: 600; }
.palabra.serif { font-family: var(--serif); font-style: italic; letter-spacing: -.02em; }
.tipo-lista.enfoque .palabra { opacity: .2; }
.tipo-lista.enfoque .palabra.activa { opacity: 1; }
.coma { font-family: var(--grotesk); font-weight: 600; }
.mini {
  display: inline-block; position: relative; vertical-align: middle;
  width: .9em; height: .9em; margin: 0 .05em; cursor: pointer;
}
.mini img, .mini-vacio {
  position: absolute; left: 50%; top: 50%;
  width: var(--w, 1.2em); height: auto; max-width: none;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.mini:hover img, .mini:hover .mini-vacio { transform: translate(-50%, -50%) rotate(0) scale(1.08); z-index: 3; }
.mini-vacio {
  aspect-ratio: 297 / 420; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,.04) 8px 16px), #ececec;
  outline: 1px dashed rgba(0,0,0,.3); outline-offset: -6px;
}
.mini-vacio b { font-family: var(--serif); font-weight: 400; font-size: .35em; color: rgba(0,0,0,.4); }
.mini-nombre {
  position: absolute; left: 50%; top: calc(50% + .55em); transform: translateX(-50%);
  font-family: var(--sans); font-size: 10px; letter-spacing: 0; font-style: normal; font-weight: 500;
  background: #000; color: #fff; padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 4;
}
.mini:hover .mini-nombre { opacity: 1; }
.nota {
  display: inline-block; vertical-align: top; position: relative; top: .1em;
  width: min(330px, 70vw); padding: 12px 14px;
  background: #000; color: #fff; font-family: var(--sans); font-size: 11px; line-height: 1.35;
  letter-spacing: 0; font-weight: 500; font-style: normal; transform: rotate(-1.5deg);
}
.tipo-ver {
  display: inline-block; margin-top: 40px; margin-left: 4px;
  background: #000; color: #fff; border-radius: 999px; padding: 8px 18px;
  font-size: 12px; text-transform: uppercase; font-weight: 500; transition: transform .25s;
}
.tipo-ver:hover { transform: translateX(6px); }
@media (max-width: 760px) { .tipo-lista { font-size: 12vw; } }

/* Imágenes sin fondo dentro del texto */
.mini.recorte img { box-shadow: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }

/* ---------- 5. Final del Inicio: texto + imagen grande ---------- */
.contacto.final { justify-content: flex-start; gap: 22px; padding-bottom: 14px; }
/* toda la sección final en burdeo plano (sin manchas ni grano), con el texto en blanco puro */
.contacto.final { --burdeo: #7b3540; background: var(--burdeo); color: #fff; position: relative; overflow: hidden; border-radius: 0; }   /* esquinas rectas */
/* video de fondo: cubre toda la sección, difuminado y con menos saturación */
.final-fondo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  filter: blur(2.5px) saturate(.65) brightness(.8);
  transform: scale(1.03);   /* así el difuminado no deja bordes claros */
  pointer-events: none;
}
.contacto.final > :not(.final-fondo):not(.boton-contacto) { position: relative; z-index: 1; }
.contacto.final .final-img.en-esquina { background: transparent; }

.final-texto {
  text-align: center; white-space: pre-line; text-transform: uppercase;
  font-size: clamp(11px, .9vw, 14px); line-height: 1.5;
}
.contacto.final .final-texto {
  font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; letter-spacing: .06em;
  font-size: clamp(14px, 1.3vw, 20px); line-height: 1.45;   /* un poco más grande que antes, para que se lea sobre el video */
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
  color: #fff; align-self: center; margin-top: clamp(28px, 7vh, 80px);   /* un poco más abajo y centrado */
}
/* botón para ir a Contacto, abajo al centro */
.boton-contacto {
  position: absolute; left: 50%; bottom: clamp(22px, 5vh, 48px); transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--burdeo); border-radius: 5px;
  padding: 5px 14px; font-size: clamp(13px, 1.1vw, 17px); white-space: nowrap;
  transition: background .25s, color .25s;
}
.boton-contacto:hover { background: #000; color: #fff; }
.final-img { flex: 1; min-height: 60vh; border-radius: 8px; }
.final-img > img { width: 100%; height: 100%; object-fit: cover; }
/* Imagen final sobre burdeo: la foto ocupa 1/3 del ancho, arriba a la derecha, con ~2 cm de margen */
.final-img.en-esquina { background: var(--burdeo); border-radius: 0; --m: clamp(18px, 5vw, 76px); }
.final-img.en-esquina > img {
  position: absolute; top: var(--m); right: var(--m);
  width: min(33.3%, 210px); height: auto;   /* tamaño fijo chico (máx. 210 px); script.js la ajusta también al alto */
  /* foto con aspecto antiguo: colores apagados y un poco cálidos (recta y sin marco) */
  filter: sepia(.22) saturate(.82) contrast(1.06) brightness(.96);
}

/* celulares angostos: barra más compacta para que quepan los 5 botones */
@media (max-width: 420px) {
  .barra { padding: 0 10px; gap: 8px; }
  .barra .nombre { font-size: 10.5px; letter-spacing: .01em; }
  .barra nav { gap: 8px; font-size: 8.5px; letter-spacing: 0; }
}
@media (max-width: 340px) {
  .barra { padding: 0 8px; gap: 6px; }
  .barra .nombre { font-size: 9.5px; }
  .barra nav { gap: 6px; font-size: 7.3px; }
}