/* XKLA · Home — v5
   Solo lo específico de la home. Tokens, cabecera, menú, pie y revelados están en sistema.css.
   1 · hero (el logo como ventana) · 2 · la definición · 3 · las escalas (el marco que escala)
   · 4 · trabajo · 5 · clientes y cierre */

/* 1 · Hero: el logo como ventana, dirigido por el scroll ------------------
   Cada plano ocupa un tramo del recorrido fijo; entre planos, un barrido (scaleX con contraescala).
   En el último tramo, el cafeto escala hasta pantalla completa. Sin temporizador.
   Rendimiento: con el scroll solo cambian transform y opacity. */
.hero { position: relative; height: 100svh; }
.movimiento .hero { height: 320svh; }
.hero__fijo { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--grafito); }

.hero__ventana { position: absolute; inset: 0; z-index: 0; }   /* contexto propio: los planos quedan bajo la máscara */
/* Sin JS: la ventana se recorta con la máscara del logo (estática) */
.no-js .hero__ventana {
  -webkit-mask: url("../logo/xkla-ventana.svg") 50% 44% / min(80%, 148svh) auto no-repeat;
          mask: url("../logo/xkla-ventana.svg") 50% 44% / min(80%, 148svh) auto no-repeat;
}
/* Con JS: capa grafito con el hueco del logo, colocada y escalada solo con transform.
   El contorno enorme cubre el resto de la pantalla (sin costuras: entra 1 px en el margen del SVG). */
.hero__mascara {
  position: absolute; left: 0; top: 0; width: var(--mw, 100px); height: var(--mh, 40px);
  z-index: 1; color: var(--grafito); transform-origin: 0 0;
  outline: 300vmax solid var(--grafito); outline-offset: -1px;
}
.hero__mascara svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__mascara-registro { color: var(--hueso); }
.no-js .hero__mascara { display: none; }
.hero__plano {
  position: absolute; visibility: hidden; overflow: hidden; transform-origin: 0 50%;
  /* caja del logo ampliada (la fija el JS; sin JS, toda la pantalla) */
  left: var(--vx, 0); top: var(--vy, 0); width: var(--vw, 100%); height: var(--vh, 100%);
}
.hero__plano.is-activo { visibility: visible; }
.hero__final { left: 0; top: 0; width: 100%; height: 100%; }
.hero__plano img, .hero__plano picture { width: 100%; height: 100%; max-width: none; }
.hero__plano img { object-fit: cover; transform-origin: 0 50%; }
/* will-change solo mientras la sección está en pantalla (clase que pone el JS) */
.hero--activo .hero__plano, .hero--activo .hero__plano img { will-change: transform; }
.reducido .hero__final, .no-js .hero__final { display: none; }


/* Cartela de la ventana: bajo el logo, alineada al borde derecho de la A (posición: JS) */
.hero__cartela {
  position: absolute; z-index: 2; top: var(--cartela-y, 72%); right: var(--cartela-x, var(--m));
  font-size: var(--t15); color: var(--hueso-2); white-space: nowrap;
}
.hero__cartela .js-proyecto { color: var(--hueso); }

/* Texto: H1 abajo a la izquierda (cols 1–6); la línea secundaria en las cols 8–11,
   alineada a la línea base de la última línea del H1 */
.hero__pie {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: last baseline;
  padding: 0 var(--m) clamp(28px, 5svh, 72px);
}
.hero__titulo { grid-column: 1 / span 6; line-height: 1.05; }
.hero__sub { grid-column: 8 / span 4; font-size: var(--t17); color: var(--hueso-2); max-width: 34ch; }
@media (max-width: 899px) {
  .hero__pie { display: block; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .hero__titulo { font-size: clamp(30px, 8.6vw, 34px); }
  .hero__sub { margin-top: 12px; font-size: 16px; }
}

/* 2 · La definición ----------------------------------------------------- */
.def {
  position: relative; z-index: 2; background: var(--hueso); color: var(--grafito);
  padding: var(--seccion) var(--m) calc(var(--seccion) * .6);
}
.def__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 32px; align-items: start; }
.def__titulo { grid-column: 1 / span 6; max-width: 14em; }
.def__texto { grid-column: 8 / -1; font-size: var(--t21); line-height: 1.45; max-width: 34em; padding-top: .35em; }
.def__gesto { margin-top: clamp(48px, 6vw, 96px); overflow: hidden; }
.def__escala { line-height: .82; padding-bottom: .06em; font-size: clamp(96px, 21vw, 420px); font-weight: 700; }
@media (max-width: 899px) {
  .def__titulo, .def__texto { grid-column: 1 / -1; }
  .def__texto { font-size: var(--t17); padding-top: 0; }
}

/* 3 · Las escalas: el marco que escala --------------------------------- */
.esc { position: relative; padding: var(--seccion) var(--m); }
.esc__titulo { max-width: 13em; }
.esc__lista { margin-top: 64px; display: grid; gap: 96px; }
.esc__fig { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: end; }
.esc__media { grid-column: 5 / -1; aspect-ratio: var(--r); max-height: 86svh; border-radius: 4px; overflow: hidden; justify-self: start; width: 100%; }
.esc__item:nth-child(-n+3) .esc__media { width: auto; height: min(80svh, 720px); }
.esc__media img, .esc__media video, .esc__media picture { width: 100%; height: 100%; object-fit: cover; }
.esc__pie { grid-column: 1 / span 4; grid-row: 1; display: grid; gap: 8px; align-self: end; }
.esc__formato { font-size: var(--t17); font-weight: 600; }
.esc__desc { font-size: var(--t17); max-width: 30ch; }
.esc__credito { font-size: var(--t13); color: var(--hueso-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.esc__pausa { font-size: var(--t13); color: var(--hueso); border-bottom: 1px solid var(--linea); padding: 2px 0; }
.reducido .esc__pausa, .no-js .esc__pausa { display: none; }
.movimiento .esc__pie:focus-within { opacity: 1; visibility: visible; }
@media (max-width: 899px) {
  .esc__fig { display: block; }
  .esc__media { width: 100%; }
  .esc__item:nth-child(-n+3) .esc__media { height: auto; width: min(100%, 60svh * var(--r)); }
  .esc__pie { margin-top: 16px; }
}

/* Con movimiento: sección fija y un único marco que cambia de proporción */
.movimiento .esc { height: 450svh; padding: 0; }
.movimiento .esc__fijo { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.movimiento .esc__titulo {
  position: absolute; z-index: 3; left: var(--m); top: calc(var(--cab) + 8px);
  width: calc(4 * var(--col) + 3 * var(--g)); max-width: none;
}
.movimiento .esc__lista { margin: 0; display: block; }
.movimiento .esc__fig { display: block; }
/* Marco: una caja del tamaño de la pantalla con overflow hidden que se coloca y se escala (x, y)
   con transform; la lente lleva la contraescala para que la pieza no se deforme. */
.movimiento .esc__item .esc__media {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto;
  border-radius: 0; overflow: hidden; visibility: hidden; transform-origin: 0 0;
  justify-self: stretch; align-self: stretch;
}
.movimiento .esc__lente { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.esc--activa .esc__media, .esc--activa .esc__lente, .esc--activa .esc__media img, .esc--activa .esc__media video, .esc--activa .esc__media picture { will-change: transform; }
.movimiento .esc__media img, .movimiento .esc__media video, .movimiento .esc__media picture {
  position: absolute; left: 0; top: 0; max-width: none; object-fit: cover;
  transform-origin: 50% 50%;
}
.movimiento .esc__media picture img { position: static; width: 100%; height: 100%; transform: none; }
.esc--activa .esc__media picture img { will-change: auto; }
.movimiento .esc__pie {
  position: absolute; z-index: 3; left: var(--m); bottom: 56px;
  width: calc(4 * var(--col) + 3 * var(--g));
  opacity: 0; visibility: hidden; transition: opacity .2s linear, visibility 0s .2s;
}
.movimiento .esc__item.is-activo .esc__pie { opacity: 1; visibility: visible; transition: opacity .4s linear .22s, visibility 0s .22s; }
/* En la ciudad el pie va a la derecha, sobre el agua: no tapa nada impreso en la lámina */
.movimiento .esc__pie--ciudad { background: var(--grafito); padding: 20px 24px 22px; border-radius: 2px; left: auto; right: var(--m); width: min(400px, calc(100% - 2 * var(--m))); }
@media (max-width: 899px) {
  .movimiento .esc__titulo { width: auto; right: var(--m); top: calc(var(--cab) + 16px); }
  .movimiento .esc__pie { left: var(--m); right: var(--m); width: auto; bottom: auto; top: var(--pie-y, 64%); }
  .movimiento .esc__pie--ciudad { top: auto; bottom: 24px; right: auto; width: calc(100% - 2 * var(--m)); }
  .movimiento .esc__titulo { font-size: var(--t28); }
}

/* 4 · Trabajo ----------------------------------------------------------- */
.trab { padding: var(--seccion) var(--m) calc(var(--seccion) * .6); }
.trab__titulo { margin-bottom: clamp(40px, 5vw, 72px); }
.trab__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px var(--g); align-items: start; }
/* Retícula alineada: Flora a todo el ancho en 16:9; debajo, 2 × 2 en 4:3 */
.obra--ancha { grid-column: 1 / -1; }
.obra__media { aspect-ratio: 4 / 3; }
.obra--ancha .obra__media { aspect-ratio: 16 / 9; }
.obra__media picture { position: absolute; inset: 0; }
.obra__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trab__todo { margin-top: 48px; text-align: right; }
@media (max-width: 899px) {
  .trab__lista { grid-template-columns: 1fr; row-gap: 40px; }
  .obra--ancha .obra__media { aspect-ratio: 4 / 3; }
  .obra__meta { white-space: normal; }
}

/* 5 · Clientes y cierre ------------------------------------------------- */
.clientes { padding: calc(var(--seccion) * .7) 0 calc(var(--seccion) * .5); }
.clientes__titulo { padding: 0 var(--m); font-size: var(--t15); font-weight: 400; color: var(--hueso-2); }

/* Marquesina de marcas (como la de luiskoepke.com): continua, arrastrable, con pausa en hover y foco.
   n logos visibles, medianil y alto máximo según el ancho; bordes con máscara. */
.marquesina {
  --n: 6; --hueco: 44px; --alto: 72px; --borde: 80px;
  --casilla: calc((100vw - (var(--n) - 1) * var(--hueco)) / var(--n));
  margin-top: clamp(28px, 2.5vw, 48px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--borde), #000 calc(100% - var(--borde)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--borde), #000 calc(100% - var(--borde)), transparent);
  cursor: grab; touch-action: pan-y; user-select: none;
}
.marquesina.arrastrando { cursor: grabbing; }
.marquesina__tren { display: flex; width: max-content; }
.marquesina--activa .marquesina__tren { will-change: transform; }
.marquesina__pista { display: flex; gap: var(--hueco); padding-right: var(--hueco); }
.marquesina__logo { flex: none; width: var(--casilla); height: var(--alto); display: grid; place-items: center; }
/* Tamaño óptico: cada logo ocupa la misma área (--w = √proporción, --h = 1/√proporción, en el marcado);
   --u es el lado de un logo cuadrado. Siempre dentro de su casilla: sin recortes y centrado. */
.marquesina { --u: calc(var(--alto) * .74); }
.marquesina__logo img {
  width: calc(var(--u) * var(--w, 1)); height: calc(var(--u) * var(--h, 1)); max-width: 88%; max-height: 100%;
  object-fit: contain; opacity: .9; pointer-events: none;
  transition: opacity .3s linear, transform .3s var(--salida);
}
.marquesina__logo:hover img { opacity: 1; transform: translateY(-2px); }
@media (min-width: 1921px) { .marquesina { --n: 8; --alto: 80px; } }
@media (max-width: 1024px) { .marquesina { --n: 5; --hueco: 40px; --alto: 66px; --borde: 72px; } }
@media (max-width: 768px) { .marquesina { --n: 4; --hueco: 32px; --alto: 60px; --borde: 60px; } }
@media (max-width: 480px) { .marquesina { --n: 3; --hueco: 24px; --alto: 54px; --borde: 48px; } }
/* Movimiento reducido o sin JS: una fila quieta con scroll horizontal manual */
.reducido .marquesina, .no-js .marquesina { overflow-x: auto; cursor: auto; -webkit-mask-image: none; mask-image: none; padding: 0 var(--m); }
.reducido .marquesina__pista[aria-hidden], .no-js .marquesina__pista[aria-hidden] { display: none; }

.cierre {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); row-gap: 40px; align-items: start;
  padding: calc(var(--seccion) * .5) var(--m) calc(var(--seccion) * .8);
}
.cierre__titulo { grid-column: 1 / span 7; max-width: 15em; }
.cierre__canales { grid-column: 9 / -1; align-self: start; display: grid; gap: 12px; justify-items: start; font-size: var(--t17); margin-top: var(--cap, 0px); }
.cierre__canales li:first-child { margin-bottom: 12px; }
.cierre__sec { color: var(--hueso); }
@media (max-width: 899px) {
  .cierre__titulo, .cierre__canales { grid-column: 1 / -1; }
}