/* Hanken Grotesk, licencia SIL Open Font 1.1 */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fuentes/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --papel: #f3f6f3;
  --hoja: #fbfcfa;
  --tinta: #14211c;
  --suave: #47574f;
  --linea: #d3dbd6;
  --canto: #b7c4bc;
  --verde: #0a7557;
  --verde-canto: #064c38;
  --tinta-canto: #000f0a;
  --cuna: #e3ece6;
  --radio: 20px;
  --radio-tecla: 12px;
  --orilla: 16px;
  --barra: 64px;
  --tablero: 84px;
  --curva: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
}
img, canvas { display: block; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 6px; }

.saltar {
  position: fixed; left: 16px; top: -60px; z-index: 30;
  background: var(--tinta); color: var(--hoja); padding: 10px 14px; border-radius: 8px;
}
.saltar:focus { top: 10px; }

/* Barra */
.barra {
  height: var(--barra);
  display: flex; align-items: center; gap: 28px;
  padding: 0 28px;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--tinta); text-decoration: none;
  font-size: 19px; font-weight: 650; letter-spacing: -.015em;
  margin-right: auto; white-space: nowrap;
}
.marca svg { fill: var(--verde); flex: none; }
.barra nav { display: flex; gap: 26px; }
.enlace {
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  color: var(--suave); font-size: 16px; font-weight: 500;
  transition: color .15s;
}
.enlace:hover { color: var(--tinta); }
.enlace-cel { display: none; }

/* Teclas: tienen canto, bajan al picar y se quedan hundidas si están activas */
.tecla {
  --borde: var(--linea);
  --fondo: var(--hoja);
  --texto: var(--tinta);
  --cantoc: var(--canto);
  --alto: 3px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 18px;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio-tecla);
  box-shadow: 0 var(--alto) 0 var(--cantoc), 0 calc(var(--alto) + 5px) 12px -6px rgb(20 50 38 / .28);
  font-size: 16px; font-weight: 600; letter-spacing: -.005em; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .09s ease-out, box-shadow .09s ease-out, background-color .18s, color .18s, border-color .18s;
}
.tecla:hover { --fondo: #fff; --borde: var(--canto); }
.tecla:active { transform: translateY(3px); box-shadow: 0 0 0 var(--cantoc), 0 1px 3px -1px rgb(20 50 38 / .3); }
.tecla[aria-pressed="true"], .tecla[aria-current="true"] {
  --fondo: var(--verde); --texto: #f7fbf8; --borde: var(--verde); --cantoc: var(--verde-canto);
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--cantoc);
}
.tecla-verde { --fondo: var(--verde); --texto: #f7fbf8; --borde: var(--verde); --cantoc: var(--verde-canto); }
.tecla-verde:hover { --fondo: #08694e; --borde: #08694e; }
.tecla-tinta { --fondo: var(--tinta); --texto: #f3f6f3; --borde: var(--tinta); --cantoc: var(--tinta-canto); }
.tecla-tinta:hover { --fondo: #1f3029; --borde: #1f3029; }
.tecla-chica { min-height: 42px; padding: 0 16px; font-size: 15px; }
.tecla i {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--c); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 0 0 1px rgb(20 33 28 / .18);
  flex: none;
}

/* Sin JS: todo se apila y se puede leer */
.momento { position: relative; }
.lamina { position: relative; overflow: hidden; background: var(--cuna); border-radius: var(--radio); }
html:not(.js) .lamina { height: 70vh; margin: 0 var(--orilla); }
html:not(.js) .nota { padding: 24px 28px 48px; }
html:not(.js) .tablero, html:not(.js) .pista, html:not(.js) canvas { display: none; }
html:not(.js) .capas img { position: static; opacity: 1; }

/* Escenario: una sola pantalla, nada empuja al visitante */
.js body { height: 100dvh; overflow: hidden; display: grid; grid-template-rows: var(--barra) minmax(0, 1fr) var(--tablero); }
.js .escenario { position: relative; margin: 0 var(--orilla); min-height: 0; }
.js .momento { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .32s ease, visibility 0s .32s; }
.js .momento.activo { visibility: visible; opacity: 1; transition: opacity .42s ease; z-index: 1; }
.js .lamina { position: absolute; inset: 0; container-type: size; }

.base, .base img, .lamina canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.base img { object-fit: cover; }
.js [data-arrastre] .base { transition: opacity .3s; }
.js [data-arrastre].listo .base { opacity: 0; }
[data-arrastre] { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
[data-arrastre]:active { cursor: grabbing; }
.capas img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .55s ease;
}
.capas img.ver { opacity: 1; }

/* El corte: la hoja se come la esquina de la imagen */
.nota {
  width: min(500px, 41%);
  padding: 26px 34px 0 12px;
  background: var(--papel);
}
.js .nota {
  position: absolute; left: -1px; bottom: -1px; z-index: 2;
  border-top-right-radius: 28px;
}
.js .nota::before, .js .nota::after {
  content: ""; position: absolute; width: 28px; height: 28px;
  background: radial-gradient(circle at 100% 0, transparent 27.5px, var(--papel) 28px);
}
.js .nota::before { left: 0; top: -28px; }
.js .nota::after { right: -28px; bottom: 0; }

.nota h1, .nota h2 {
  font-size: clamp(36px, 3.9vw, 58px);
  font-weight: 620; letter-spacing: -.034em; line-height: 1.02;
  text-wrap: balance;
}
.nota h2 { font-size: clamp(34px, 3.5vw, 52px); }
.nota > p:not(.leyenda) {
  margin-top: 14px; max-width: 40ch;
  color: var(--suave); font-size: clamp(17px, 1.35vw, 19px); text-wrap: pretty;
}
.teclas { display: grid; gap: 10px; margin-top: 18px; }
.teclas + .teclas { margin-top: 12px; }
.teclas-2 { grid-template-columns: 1fr 1fr; }
.teclas-cierre { grid-template-columns: auto auto; justify-content: start; }
.leyenda { margin-top: 16px; padding-bottom: 8px; color: var(--suave); font-size: 13px; }

/* Entrada de cada momento: solo la nota se acomoda */
@media (prefers-reduced-motion: no-preference) {
  .js .momento .nota > * { transform: translateY(10px); opacity: 0; }
  .js .momento.activo .nota > * {
    transform: none; opacity: 1;
    transition: transform .55s var(--curva), opacity .4s ease;
    transition-delay: calc(.06s + var(--i, 0) * .05s);
  }
  .js .momento .nota > :nth-child(2) { --i: 1; }
  .js .momento .nota > :nth-child(3) { --i: 2; }
  .js .momento .nota > :nth-child(4) { --i: 3; }
  .js .momento .nota > :nth-child(5) { --i: 4; }
}

/* La pista de la hora */
.pista {
  position: absolute; z-index: 2;
  right: 16px; bottom: 16px; width: min(560px, 46%);
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  padding: 12px 20px 10px;
  background: var(--hoja); border-radius: 16px;
  box-shadow: 0 3px 0 var(--canto), 0 14px 26px -12px rgb(10 30 22 / .5);
}
.pista label { font-size: 15px; font-weight: 650; white-space: nowrap; }
.pista-marcas {
  display: flex; justify-content: space-between; margin-top: 4px;
  color: var(--suave); font-size: 13px;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 30px; margin: 0; background: none; cursor: grab;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #e9a65f 0%, #efe3c4 28%, #d8dfdb 45%, #34463f 70%, #16231e 100%);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #e9a65f 0%, #efe3c4 28%, #d8dfdb 45%, #34463f 70%, #16231e 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -12px; border-radius: 10px;
  background: var(--hoja); border: 1px solid var(--canto);
  box-shadow: 0 3px 0 var(--canto), 0 7px 10px -4px rgb(20 50 38 / .4);
  transition: transform .09s, box-shadow .09s;
}
input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 10px;
  background: var(--hoja); border: 1px solid var(--canto);
  box-shadow: 0 3px 0 var(--canto);
}
input[type="range"]:active::-webkit-slider-thumb { transform: translateY(2px); box-shadow: 0 1px 0 var(--canto); }
input[type="range"]:active { cursor: grabbing; }

/* El cel */
.lamina-cel { background: var(--cuna); }
.cel {
  position: absolute; left: 62%; top: 5cqh;
  width: 60cqh; aspect-ratio: 520 / 1000;
  translate: -50% 0;
  background: #101a16; border-radius: 40px 40px 0 0;
  padding: 11px 11px 0;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 30px 80px -10px rgb(10 25 18 / .7);
}
.cel-pantalla {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 30px 30px 0 0; background: #1d3027;
}
.cel-pantalla img {
  position: absolute; inset: 0 0 auto; width: 100%; height: auto;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .45s var(--curva);
}
.cel-pantalla img.ver { opacity: 1; transform: none; }
.cel-punto {
  position: absolute; left: var(--x, 50%); top: var(--y, 40%);
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  background: none; border: 0; cursor: pointer; border-radius: 50%;
  transition: left .35s var(--curva), top .35s var(--curva), opacity .2s;
}
.cel-punto::before, .cel-punto::after {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  background: #f7fbf8; box-shadow: 0 0 0 2px var(--verde), 0 6px 12px rgb(0 0 0 / .35);
}
.cel-punto::after { inset: 8px; background: none; box-shadow: 0 0 0 2px #f7fbf8; opacity: 0; }
.cel-punto[hidden] { display: none; }
.cel-punto:active::before { transform: scale(.86); }
@media (prefers-reduced-motion: no-preference) {
  .cel-punto::after { animation: latido 1.9s var(--curva) infinite; }
}
@keyframes latido { 0% { transform: scale(.7); opacity: .95; } 100% { transform: scale(1.5); opacity: 0; } }
.globo {
  position: absolute; left: calc(62% + 30cqh + 24px); top: 26cqh;
  width: min(250px, 18cqw);
  padding: 13px 16px 14px;
  background: var(--verde); color: #f7fbf8; border-radius: 16px 16px 16px 4px;
  font-size: 17px; font-weight: 550; line-height: 1.28;
  box-shadow: 0 3px 0 var(--verde-canto), 0 18px 26px -14px rgb(10 50 36 / .6);
  opacity: 0; transform: translateY(12px) scale(.96); transform-origin: 0 100%;
  transition: opacity .2s, transform .45s var(--curva);
}
.globo span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; opacity: .86; }
.globo.ver { opacity: 1; transform: none; }

/* Tablero */
.tablero {
  display: grid; grid-template-columns: 1fr 190px; gap: 14px; align-items: start;
  padding: 16px var(--orilla) 0;
}
.tablero-teclas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.tablero-teclas .tecla { padding: 0 8px; }
.tablero-cel { display: none; }
#siguiente[hidden] { visibility: hidden; display: inline-flex; }

/* Hoja de detalles */
.hoja {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(620px, 100vw); max-width: none; height: 100dvh; max-height: none;
  padding: 0; border: 0; background: var(--hoja); color: var(--tinta);
  box-shadow: -30px 0 70px -30px rgb(10 30 22 / .4);
}
.hoja[open] { display: flex; flex-direction: column; }
.hoja::backdrop { background: rgb(20 33 28 / .32); }
@media (prefers-reduced-motion: no-preference) {
  .hoja[open] { animation: entra .4s var(--curva); }
  @keyframes entra { from { transform: translateX(40px); opacity: 0; } }
}
.hoja-cabeza {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; border-bottom: 1px solid var(--linea);
}
.hoja-pestanas { display: flex; gap: 20px; }
.hoja-cuerpo { flex: 1; overflow-y: auto; padding: 30px 28px 40px; overscroll-behavior: contain; }
.hoja-cuerpo section + section { margin-top: 48px; }
.hoja h2 { font-size: 34px; font-weight: 620; letter-spacing: -.03em; line-height: 1.05; }
.hoja h3 { margin-top: 24px; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.hoja h3 + p, .hoja h3 + ul { margin-top: 6px; }
.hoja p, .hoja li { color: var(--suave); }
.hoja strong { color: var(--tinta); font-weight: 650; }
.lista-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; padding: 0; margin-top: 12px !important; list-style: none; }
.pasos { margin-top: 16px; padding-left: 22px; display: grid; gap: 8px; }
.pasos li::marker { color: var(--verde); font-weight: 650; }
details { border-top: 1px solid var(--linea); }
details:first-of-type { margin-top: 14px; }
details:last-of-type { border-bottom: 1px solid var(--linea); }
summary { padding: 14px 0; cursor: pointer; font-weight: 600; }
details p { padding-bottom: 16px; }
.hoja-pie { margin-top: 40px; font-size: 14px; }

/* Pantallas bajitas de compu */
@media (min-width: 768px) and (max-height: 760px) {
  :root { --barra: 56px; --tablero: 76px; }
  .nota h1, .nota h2 { font-size: clamp(30px, 3.1vw, 42px); }
  .nota > p:not(.leyenda) { margin-top: 8px; font-size: 16px; }
  .teclas { margin-top: 12px; gap: 8px; }
  .teclas + .teclas { margin-top: 8px; }
  .tecla { min-height: 42px; }
  .leyenda { margin-top: 10px; }
  .tablero { padding-top: 12px; }
}

/* Tabletas */
@media (min-width: 768px) and (max-width: 1100px) {
  .barra nav { gap: 16px; }
  .nota { width: 46%; }
  .pista { width: 48%; grid-template-columns: 1fr; gap: 0; }
  .pista label { display: none; }
  .tablero { grid-template-columns: 1fr 120px; }
  .tablero-teclas { gap: 6px; }
  .tablero-teclas .tecla { font-size: 14px; }
  .globo { left: 50%; top: 8cqh; width: 180px; font-size: 15px; }
  .cel { left: 72%; }
}

/* Cel */
@media (max-width: 767px) {
  :root { --barra: 58px; --tablero: 70px; --orilla: 10px; --radio: 16px; }
  body { font-size: 16px; }
  .barra { gap: 10px; padding: 0 12px; }
  .barra nav { display: none; }
  .enlace-cel { display: inline-block; font-size: 15px; }
  .marca { gap: 7px; font-size: 16px; }
  .marca svg { width: 19px; height: 19px; }
  .tecla-chica { padding: 0 11px; font-size: 14px; min-height: 40px; }

  .js .momento { display: flex; flex-direction: column; }
  .js .lamina { position: relative; inset: auto; flex: 1 1 0; min-height: 0; }
  .js .nota {
    position: relative; left: auto; bottom: auto; flex: none;
    width: auto; margin: -22px 0 0; padding: 18px 8px 0;
    border-radius: 22px 22px 0 0;
  }
  .js .nota::before, .js .nota::after { display: none; }
  .nota h1, .nota h2 { font-size: clamp(29px, 8.2vw, 36px); line-height: 1.04; }
  .nota > p:not(.leyenda) { margin-top: 8px; font-size: 16px; }
  .teclas { margin-top: 12px; gap: 8px; }
  .teclas + .teclas { margin-top: 8px; }
  .tecla { min-height: 46px; padding: 0 10px; font-size: 15px; }
  .teclas-cierre { grid-template-columns: 1fr 1fr; }
  .leyenda { margin-top: 10px; padding-bottom: 2px; font-size: 12px; }

  #hora { padding-bottom: 0; }
  .js .pista {
    position: absolute; left: 10px; right: 10px; bottom: auto; top: 10px; width: auto;
    grid-template-columns: 1fr; gap: 0; padding: 6px 14px 8px;
    box-shadow: 0 3px 0 var(--canto), 0 10px 16px -10px rgb(10 30 22 / .5);
  }
  .pista label { display: none; }

  .cel { left: 50%; top: 12px; width: min(66cqh, 74cqw); border-radius: 30px 30px 0 0; padding: 8px 8px 0; }
  .cel-pantalla { border-radius: 23px 23px 0 0; }
  .globo { left: 10px; right: 10px; top: auto; bottom: 34px; width: auto; font-size: 15px; }

  .tablero { grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 10px 0; }
  .tablero-teclas { display: none; }
  .tablero-cel { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; color: var(--suave); font-size: 14px; white-space: nowrap; }
  .tablero-cel .tecla { min-height: 46px; }
  #siguiente { min-height: 46px; }
  #siguiente[hidden] { visibility: visible; display: none; }

  .hoja-cabeza { padding: 10px 14px; }
  .hoja-pestanas { gap: 12px; }
  .hoja-pestanas .enlace { font-size: 14px; }
  .hoja-cuerpo { padding: 24px 18px 32px; }
  .lista-dos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* v5: fotos fijas que se vuelven la siguiente escena */
.lamina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.base img { position: absolute; }

.cruce { cursor: ew-resize; touch-action: pan-y; }
.cruce-a {
  transform: scale(var(--a-escala, 1)); transform-origin: 26% 20%;
  opacity: var(--a-opacidad, 1); will-change: transform, opacity;
}
.cruce-b {
  transform: scale(var(--b-escala, 1.75)); transform-origin: 50% 0;
  opacity: var(--b-opacidad, 0); will-change: transform, opacity;
}
.cruce-velo { position: absolute; inset: 0; background: var(--papel); opacity: var(--velo, 0); pointer-events: none; }
#ventana .nota { transition: none; }
#ventana .pista { grid-template-columns: auto 1fr; }
#ventana .pista-riel input { background: none; }
#cruce-control::-webkit-slider-runnable-track { background: linear-gradient(90deg, #47574f, #d8e4e6 58%, #e9c9a8); }
#cruce-control::-moz-range-track { background: linear-gradient(90deg, #47574f, #d8e4e6 58%, #e9c9a8); }

.vistas img { opacity: 0; transform: scale(1.05); transition: opacity .8s ease, transform 1.3s var(--curva); }
.vistas img.ver { opacity: 1; transform: none; }
.vistas img.empuje { opacity: 0; transform: scale(1.5); z-index: 1; transition: opacity .7s ease, transform .8s cubic-bezier(.5, 0, .3, 1); }
.paseo img.hora { opacity: 0; transform: none; transition: opacity .12s linear; z-index: 1; }

.nota.cambia h2, .nota.cambia #torres-dice { opacity: 0 !important; transform: translateY(-8px) !important; transition: opacity .18s ease, transform .18s ease !important; transition-delay: 0s !important; }
.teclas-3 { grid-template-columns: repeat(3, 1fr); }
.tecla-foto { flex-direction: column; gap: 6px; padding: 6px 6px 9px; min-height: 0; overflow: hidden; }
.tecla-foto img { display: block; width: 100%; height: 58px; object-fit: cover; border-radius: 7px; }
.tecla-foto[aria-pressed="true"] img { opacity: .9; }
#amenidades-capas img { opacity: 0; }

.punto {
  position: absolute; z-index: 3; left: 20%; top: 60%;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px 0 10px; translate: -22px -50%;
  background: var(--hoja); color: var(--tinta); border: 1px solid var(--linea); border-radius: 24px;
  box-shadow: 0 3px 0 var(--canto), 0 12px 22px -10px rgb(10 30 22 / .55);
  font-size: 15px; font-weight: 650; cursor: pointer;
  transition: transform .09s ease-out, box-shadow .09s ease-out, left .5s var(--curva), top .5s var(--curva);
}
.punto:active { transform: translateY(3px); box-shadow: 0 0 0 var(--canto); }
.punto[hidden] { display: none; }
.punto i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--verde); }
.punto i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--verde); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .punto i::after { animation: latido 1.9s var(--curva) infinite; } }

.tarjeta {
  position: absolute; z-index: 3; right: 16px; top: 16px;
  display: grid; gap: 2px; max-width: 300px; padding: 12px 18px 13px;
  background: var(--hoja); border-radius: 14px;
  box-shadow: 0 3px 0 var(--canto), 0 14px 26px -12px rgb(10 30 22 / .5);
}
.tarjeta strong { font-size: 17px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.tarjeta span { color: var(--suave); font-size: 15px; }
.pista-hora[hidden] { display: none; }
.pista-hora { z-index: 3; }

.lamina-crece .base { clip-path: inset(30% 30% 24% 42% round 20px); }
.momento.activo .lamina-crece .base { clip-path: inset(0 0 0 0 round 0); transition: clip-path 1.1s var(--curva) .08s; }
.lamina-cel .base img { object-position: 30% 50%; }

@media (max-width: 767px) {
  .tarjeta { left: 10px; right: auto; top: 10px; max-width: 72%; padding: 8px 12px 9px; }
  .tarjeta strong { font-size: 15px; }
  .tarjeta span { font-size: 13px; }
  .js .pista-hora { top: auto; bottom: 30px; }
  #ventana .pista { grid-template-columns: 1fr; }
  #ventana .pista label { display: block; font-size: 13px; }
  .tecla-foto img { height: 44px; }
  .cruce-a { object-position: 24% 50%; }
}

/* Las torres: la nota sube al cielo y deja las tres a la vista */
.lamina .cel-pantalla img { inset: 0 0 auto; height: auto; object-fit: fill; }
@media (min-width: 768px) {
  .js #torres .nota {
    top: -1px; bottom: auto; padding: 0 34px 18px 12px;
    border-radius: 0 0 28px 0;
  }
  .js #torres .nota h2 { padding-top: 16px; }
  .js #torres .nota::before { top: auto; bottom: -28px; background: radial-gradient(circle at 100% 100%, transparent 27.5px, var(--papel) 28px); }
  .js #torres .nota::after { bottom: auto; top: 0; background: radial-gradient(circle at 100% 100%, transparent 27.5px, var(--papel) 28px); }
}
/* El trayecto real de la cámara hasta la ventana */
.camino { position: absolute; inset: 0; transform: scale(var(--a-escala, 1)); transform-origin: 50% 12%; opacity: var(--a-opacidad, 1); will-change: transform, opacity; }
.camino img { opacity: 0; will-change: opacity, transform; }
.camino img:first-child { opacity: 1; }

@media (max-width: 767px) {
  #torres-vistas { background: var(--papel); }
  #torres-vistas img {
    inset: auto auto 0 -18%; width: 136%; height: auto;
    -webkit-mask-image: linear-gradient(transparent, #000 34%); mask-image: linear-gradient(transparent, #000 34%);
  }
}
/* Portada y ventana finales */
.lamina canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-arrastre] canvas, #maqueta-lamina { cursor: ew-resize; }
#maqueta-lamina canvas, #maqueta-lamina .base { transition: transform .75s cubic-bezier(.55, 0, .3, 1), opacity .3s; transform-origin: 42% 56%; }
#maqueta-lamina.entrar canvas { transform: scale(2.3); }
.cruce-a { transform: scale(var(--a-escala, 1)); transform-origin: 84% 34%; opacity: var(--a-opacidad, 1); }
.cruce-v { transform: scale(var(--v-escala, 1.18)); transform-origin: 50% 16%; opacity: var(--v-opacidad, 0); will-change: transform, opacity; }
.hueco {
  position: absolute; inset: 24px; z-index: 2; margin: 0; display: grid; place-items: center; padding: 24px;
  border: 2px dashed var(--canto); border-radius: 14px; background: var(--hoja); color: var(--suave);
  text-align: center; font-size: 17px;
}
.hueco[hidden] { display: none; }
.tecla[hidden] { display: none; }
.teclas-3 .tecla { padding: 0 8px; }
.cel-pantalla { background: #16241d; }

@media (max-width: 767px) {
  .js .momento > .pista { top: auto; bottom: 212px; left: 18px; right: 18px; }
  .js .pista { padding: 4px 14px 6px; }
  .pista label { display: block !important; margin-top: 2px; font-size: 13px; }
  .tarjeta { max-width: 80%; }
  .punto { min-height: 46px; }
  #maqueta-lamina.entrar canvas { transform: scale(1.8); }
}
@media (max-width: 767px) {
  #cruce { background: var(--papel); }
  .cruce-b {
    inset: auto auto 0 -18%; width: 136%; height: auto; transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(transparent, #000 34%); mask-image: linear-gradient(transparent, #000 34%);
  }
}
/* v6: la obra */
#obra .nota { width: min(470px, 36%); }
.obra-dron { z-index: 1; opacity: 0; pointer-events: none; transition: opacity .5s; }
.obra-dron.ver { opacity: 1; }
#obra .hueco { z-index: 2; inset: 16px 16px 150px 16px; }
.obra-panel {
  position: absolute; z-index: 2; right: 16px; bottom: 16px; width: min(800px, calc(64% - 60px));
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  padding: 10px 12px 10px 18px; background: var(--hoja); border-radius: 16px;
  box-shadow: 0 3px 0 var(--canto), 0 14px 26px -12px rgb(10 30 22 / .5);
}
.contador { margin: 0; min-width: 104px; }
.contador strong { display: block; font-size: 32px; font-weight: 640; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.contador span { display: block; margin-top: 3px; color: var(--suave); font-size: 13px; white-space: nowrap; }
.fases { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0 5px; }
.fases::-webkit-scrollbar { display: none; }
.fase {
  flex: 1 0 auto; min-height: 42px; padding: 0 9px; cursor: pointer;
  background: var(--hoja); color: var(--tinta); border: 1px solid var(--linea); border-radius: 10px;
  box-shadow: 0 2px 0 var(--canto); font-size: 14px; font-weight: 600; white-space: nowrap;
  touch-action: manipulation; transition: transform .09s ease-out, box-shadow .09s ease-out, background-color .18s, color .18s;
}
.fase:hover { background: #fff; }
.fase:active { transform: translateY(2px); box-shadow: 0 0 0 var(--canto); }
.fase[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #f7fbf8; transform: translateY(1px); box-shadow: 0 1px 0 var(--verde-canto); }
.fase[hidden] { display: none; }

/* La entrada */
.cruce-a { transform-origin: 50% 46%; }
.cruce-b { inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; -webkit-mask-image: none; mask-image: none; }
#cruce { background: var(--cuna); }

/* Sección normal: la foto se encoge */
.momento-hoja .lamina { background: none; overflow: visible; }
.cel-foto {
  position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: auto; height: auto;
  inset: 0 45% 0 0; width: 55%; height: 100%; object-fit: cover; border-radius: var(--radio);
  transition: width 1s cubic-bezier(.6, 0, .2, 1);
  z-index: 0;
}
.llena .cel-foto { width: 100%; transition: none; }
#cel .cel { left: 41%; z-index: 1; width: 52cqh; transition: opacity .5s .55s, transform .7s var(--curva) .55s; }
.llena .cel { opacity: 0; transform: translateY(40px); transition: none !important; }
#cel .globo { left: auto; right: calc(45% + 18px); top: 8cqh; width: min(230px, 18cqw); z-index: 2; display: none; }
#cel .globo.ver { display: block; }
.js #cel .nota {
  left: auto; right: 0; top: 0; bottom: 0; width: 38%; padding: 0 12px 0 0; background: none;
  border-radius: 0; display: flex; flex-direction: column; justify-content: center;
}
.js #cel .nota::before, .js #cel .nota::after { display: none; }
.llena .nota { opacity: 0; }
.enlace-mas { align-self: flex-start; margin-top: 14px; color: var(--verde); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* El formulario, sobre la misma vista */
.js #demo .nota {
  top: -1px; bottom: auto; padding: 0 34px 18px 12px; border-radius: 0 0 28px 0;
}
.js #demo .nota h2 { padding-top: 16px; }
.js #demo .nota::before { top: auto; bottom: -28px; background: radial-gradient(circle at 100% 100%, transparent 27.5px, var(--papel) 28px); }
.js #demo .nota::after { bottom: auto; top: 0; background: radial-gradient(circle at 100% 100%, transparent 27.5px, var(--papel) 28px); }
.forma {
  position: absolute; z-index: 2; right: 16px; top: 16px; width: 340px; display: grid; gap: 11px;
  padding: 18px; background: var(--hoja); border-radius: 16px;
  box-shadow: 0 3px 0 var(--canto), 0 18px 34px -14px rgb(10 30 22 / .5);
}
.campo { display: grid; gap: 4px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo input, .campo select {
  height: 44px; padding: 0 12px; width: 100%;
  background: #fff; color: var(--tinta); border: 1px solid var(--canto); border-radius: 10px; font-size: 16px;
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
.campo input[aria-invalid="true"] { border-color: #a4331f; }
.error { margin: 0; color: #a4331f; font-size: 14px; }
.error[hidden] { display: none; }
.forma .tecla { width: 100%; margin-top: 3px; }
.forma-nota { margin: 2px 0 0; color: var(--suave); font-size: 13px; line-height: 1.3; }

@media (min-width: 768px) and (max-height: 760px) {
  .forma { gap: 7px; padding: 12px 14px; width: 310px; top: 10px; }
  .campo input, .campo select { height: 38px; }
  .contador strong { font-size: 26px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  #obra .nota { width: 42%; }
  .obra-panel { width: calc(58% - 40px); grid-template-columns: 1fr; gap: 6px; }
  .fase { font-size: 13px; padding: 0 7px; }
}

@media (max-width: 767px) {
  #obra .nota { width: auto; }
  .obra-panel {
    left: 10px; right: 10px; bottom: auto; top: 10px; width: auto; display: block; padding: 8px 10px 6px 12px;
  }
  .js .obra-panel { position: absolute; }
  .contador { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
  .contador strong { font-size: 26px; }
  .contador span { margin-top: 0; }
  .fase { min-height: 40px; font-size: 14px; }

  .cruce-b { -webkit-mask-image: none; mask-image: none; inset: 0; width: 100%; height: 100%; left: 0; transform-origin: 50% 50%; }

  .momento-hoja .lamina { overflow: hidden; }
  .cel-foto { inset: 0; width: 100%; border-radius: 0; }
  .llena .cel-foto { width: 100%; }
  #cel .cel { left: 50%; top: 12px; width: min(66cqh, 74cqw); }
  #cel .globo { left: 10px; right: 10px; top: auto; bottom: 34px; width: auto; }
  .js #cel .nota { position: relative; right: auto; top: auto; bottom: auto; width: auto; padding: 18px 8px 0; background: var(--papel); display: block; border-radius: 22px 22px 0 0; }
  .enlace-mas { display: none; }

  .js #demo .nota { position: relative; top: auto; padding: 16px 8px 0; border-radius: 22px 22px 0 0; }
  .js #demo .nota h2 { padding-top: 0; }
  .js #demo .nota::before, .js #demo .nota::after { display: none; }
  .js #demo .nota .leyenda { display: none; }
  .js #demo .nota > p:not(.leyenda) { font-size: 15px; }
  .forma {
    position: relative; right: auto; top: auto; width: auto; flex: none; margin: 6px 0 0; padding: 0 8px 4px; gap: 6px;
    background: none; box-shadow: none; border-radius: 0;
  }
  .forma .campo:nth-child(3) { display: none; }
  .forma .campo { grid-template-columns: 96px 1fr; align-items: center; }
  .forma .error { grid-column: 1 / -1; }
  .campo input { height: 42px; }
  .forma-nota { font-size: 12px; }
}
/* Ajustes de la sección normal */
.tablero { grid-template-columns: 1fr 226px; }
.momento-hoja .lamina { overflow: hidden; border-radius: 0; }
.lamina .cel-foto { inset: 0 auto 0 0; width: 56%; height: 100%; }
.llena .lamina .cel-foto { width: 100%; }
#cel .cel { left: 47%; }
#cel .globo { left: 3%; right: auto; top: 10cqh; width: min(240px, 19cqw); }
.forma input, .forma select { box-shadow: inset 0 1px 2px rgb(20 50 38 / .08); }
@media (min-width: 768px) and (max-width: 1100px) { .tablero { grid-template-columns: 1fr 170px; } #siguiente { font-size: 14px; padding: 0 8px; } }
@media (max-width: 767px) {
  .tablero { grid-template-columns: 1fr 1fr; }
  .momento-hoja .lamina { border-radius: var(--radio); }
  .lamina .cel-foto, .llena .lamina .cel-foto { inset: 0; width: 100%; }
  #cel .cel { left: 50%; }
  #cel .globo { left: 10px; right: 10px; top: auto; bottom: 34px; width: auto; }
}
/* Cel: la obra y el cierre se ven completos */
@media (max-width: 767px) {
  .js #obra-lamina { flex: 0 0 auto; aspect-ratio: 1; }
  .js .obra-panel { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 10px 0 0; box-shadow: 0 3px 0 var(--canto); }
  .js #obra .nota { margin: 4px 0 0; padding-top: 12px; background: none; }
  #demo .lamina { background: var(--papel); }
  #demo .base img {
    inset: auto auto 0 -18%; width: 136%; height: auto;
    -webkit-mask-image: linear-gradient(transparent, #000 34%); mask-image: linear-gradient(transparent, #000 34%);
  }
}
/* Tomas finales: entrada y elige */
.cruce canvas { z-index: 0; }
.cruce-a { z-index: 1; }
.cruce-velo { z-index: 2; }
#elige-capas img { opacity: 0; }
.opciones { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-top: 12px; }
.opciones[hidden] { display: none; }
#elige .teclas { margin-top: 14px; }
@media (min-width: 768px) and (max-height: 760px) { .opciones { margin-top: 8px; gap: 8px; } .tecla-foto img { height: 40px; } }
@media (max-width: 767px) { .opciones { gap: 8px; margin-top: 8px; } }
/* Las capas nunca suben por encima de la nota ni de las teclas */
.lamina { isolation: isolate; }
/* Entrada cálida y grano fino: quita lo liso de render */
.cruce-e, .cruce-k, .cruce-a { will-change: transform, opacity; }
.cruce-e { z-index: 2; transform: scale(var(--e-escala, 1.14)); transform-origin: 50% 50%; opacity: var(--e-opacidad, 0); }
.cruce-k { z-index: 1; transform: scale(var(--k-escala, 1.1)); transform-origin: 14% 42%; opacity: var(--k-opacidad, 0); }
.cruce-a { z-index: 3; }
.cruce-velo { z-index: 4; }
.base-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#paseo .teclas-3 { grid-template-columns: repeat(3, 1fr); }
.opciones:empty { display: none; }
.lamina::after {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: url("medios/grano.png"); opacity: .055;
}
@media (max-width: 767px) { .lamina::after { display: none; } #demo .base-img { inset: auto auto 0 -18%; width: 136%; height: auto; -webkit-mask-image: linear-gradient(transparent, #000 34%); mask-image: linear-gradient(transparent, #000 34%); } }
#giro-control::-webkit-slider-runnable-track { background: var(--linea); }
#giro-control::-moz-range-track { background: var(--linea); }
/* ===== 11-nov: tomas fotorrealistas (portada y «vivir») ===== */
/* Tablero: tantas columnas como teclas haya */
.tablero-teclas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tablero-teclas .tecla { padding: 0 6px; font-size: 15px; }

/* Una toma vertical: foto abajo, video encima cuando ya corre */
.toma { position: absolute; inset: 0; margin: 0; overflow: hidden; background: #101a2c; }
.toma picture, .toma img, .toma video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.toma video { opacity: 0; transition: opacity .9s ease; }
.toma video.corre { opacity: 1; }
.lamina .toma img { transition: none; transform: none; opacity: 1; }

/* Portada: la noche a la izquierda, la torre a la derecha */
.portada-lamina { background: #0d1628; }
.portada-lamina::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 100% 0%, #24365e 0%, rgb(36 54 94 / 0) 60%), linear-gradient(180deg, #0f1a30 0%, #0b1322 100%);
}
#portada .toma { left: auto; width: min(52%, 82cqh); z-index: 1; border-radius: 0 var(--radio) var(--radio) 0; }
#portada .toma img, #portada .toma video { object-position: 50% 26%; }
@media (min-width: 768px) {
  .js #portada .nota {
    left: 0; top: 0; bottom: 0; width: 46%; padding: 0 3vw 34px 4.2vw;
    display: flex; flex-direction: column; justify-content: center;
    background: none; border-radius: 0; color: #f3f6f3;
  }
  .js #portada .nota::before, .js #portada .nota::after { display: none; }
  #portada .nota h1 { font-size: clamp(46px, 5.3vw, 86px); letter-spacing: -.04em; line-height: .98; max-width: 11ch; }
  #portada .nota > p:not(.leyenda) { margin-top: 26px; color: rgb(243 246 243 / .74); font-size: clamp(18px, 1.45vw, 21px); max-width: 32ch; }
  #portada .leyenda { position: absolute; left: 4.2vw; right: 3vw; bottom: 18px; margin: 0; padding: 0; color: rgb(243 246 243 / .5); font-size: 12px; max-width: 60ch; }
  /* El momento propio: la torre se abre de una rendija al llegar */
  @media (prefers-reduced-motion: no-preference) {
    #portada .toma { clip-path: inset(0 0 0 100%); }
    #portada.activo .toma { clip-path: inset(0 0 0 0); transition: clip-path 1.6s cubic-bezier(.7, 0, .2, 1) .15s; }
    #portada .toma picture { transform: scale(1.08); }
    #portada.activo .toma picture { transform: none; transition: transform 2.4s var(--curva) .15s; }
  }
}

/* «Vivir»: dos tomas verticales lado a lado, el texto a la izquierda sobre el papel */
.vivir-lamina { background: none; }
.vivir-lamina::after { display: none; }
.vivir-tomas {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(64%, 114cqh);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.vivir-tomas .toma { position: relative; inset: auto; border-radius: var(--radio); }
.vivir-tomas .toma:nth-child(2) img, .vivir-tomas .toma:nth-child(2) video { object-position: 50% 70%; }
.solo-cel { display: none; }
@media (min-width: 768px) {
  .js #vivir .nota {
    left: 0; top: 0; bottom: 0; width: calc(36% - 20px); padding: 0 24px 0 12px;
    display: flex; flex-direction: column; justify-content: center;
    background: none; border-radius: 0;
  }
  .js #vivir .nota::before, .js #vivir .nota::after { display: none; }
  #vivir .nota h2 { font-size: clamp(36px, 3.9vw, 60px); }
  @media (prefers-reduced-motion: no-preference) {
    #vivir .toma { opacity: 0; transform: translateY(28px); }
    #vivir.activo .toma { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.2s var(--curva); }
    #vivir.activo .toma:nth-child(2) { transition-delay: .18s; }
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .vivir-tomas { width: 60%; gap: 10px; }
  .js #vivir .nota { width: 38%; }
  .tablero-teclas .tecla { font-size: 13px; padding: 0 4px; }
}

/* Cel: la toma llena la pantalla y la nota queda abajo, como las demás escenas */
@media (max-width: 767px) {
  #portada .toma { width: 100%; left: 0; border-radius: var(--radio); }
  #portada .toma img, #portada .toma video { object-position: 50% 30%; }
  .vivir-tomas { position: absolute; inset: 0; width: auto; display: block; }
  .vivir-tomas .toma { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
  .vivir-tomas .toma.ver { opacity: 1; }
  .solo-cel { display: grid; }
}

/* ===== 11-nov (noche): la portada enseña el producto ===== */
/* El cel con la ficha del depto, montado sobre la unión entre la noche y la torre */
.portada-cel {
  position: absolute; z-index: 2;
  top: 11cqh; height: 78cqh; aspect-ratio: 1170 / 2280;
  right: calc(min(52%, 82cqh) - 17cqh);
  background: #0b1210; border-radius: 5.4cqh;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .16), 0 5cqh 11cqh -3cqh rgb(0 0 0 / .8);
}
#portada .portada-cel img {
  inset: 1.2cqh; width: calc(100% - 2.4cqh); height: calc(100% - 2.4cqh);
  object-fit: cover; object-position: 50% 0; border-radius: 4.3cqh;
}
.portada-ir { display: none; }
@media (min-width: 768px) {
  .portada-ir { display: inline-flex; align-self: flex-start; margin-top: 30px; padding: 0 30px; }
  @media (prefers-reduced-motion: no-preference) {
    .js #portada .portada-cel { opacity: 0; transform: translateY(6cqh); }
    .js #portada.activo .portada-cel {
      opacity: 1; transform: none;
      transition: opacity .8s ease 1.9s, transform 1.4s var(--curva) 1.9s;
    }
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .portada-cel { top: 50%; translate: 0 -50%; height: min(56cqh, 48cqw); right: calc(min(52%, 82cqh) - min(26cqh, 22cqw)); }
}
/* Cel: la tarjeta del depto sobre la toma y el pie de imagen encima de la foto */
@media (max-width: 767px) {
  .portada-cel {
    top: auto; height: auto; right: auto; left: 10px; bottom: 92px;
    width: 64%; aspect-ratio: 1072 / 425; overflow: hidden;
    background: #2e493d; border-radius: 12px;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 14px 30px -10px rgb(0 0 0 / .7);
  }
  #portada .portada-cel img {
    inset: auto; left: -4.57%; top: -64.7%; width: 109.14%; height: auto;
    object-fit: fill; border-radius: 0;
  }
  #portada .toma::after {
    content: ""; position: absolute; inset: 45% 0 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgb(8 14 24 / 0) 0%, rgb(8 14 24 / .82) 78%);
  }
  .js #portada .nota { position: relative; }
  #portada .leyenda {
    position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px);
    margin: 0; padding: 0; color: rgb(243 246 243 / .72); font-size: 11px; line-height: 1.35;
  }
  #portada .nota { padding-bottom: 6px; }
}

/* 11-nov (noche), ronda 2 */
.nota sup { font-size: .62em; line-height: 0; vertical-align: .55em; }

/* 11-nov (noche), ronda 3: en tableta angosta las 8 teclas no caben; queda Atrás, la cuenta y «Sigue» */
@media (min-width: 768px) and (max-width: 960px) {
  .tablero { grid-template-columns: 1fr minmax(200px, 34%); }
  .tablero-teclas { display: none; }
  .tablero-cel {
    display: grid; grid-template-columns: 130px auto; justify-content: start; gap: 16px; align-items: center;
    color: var(--suave); font-size: 15px; white-space: nowrap;
  }
}

/* ===== 11-nov (noche), ronda 4: «Ahora entra» y el cierre con las tomas fotorrealistas ===== */
/* La entrada sale de la fachada: el acercamiento va a los balcones encendidos */
.cruce-a { object-position: 50% 30%; transform-origin: 56% 52%; }
@media (max-width: 767px) { .cruce-a { object-position: 50% 30%; } }

/* El cierre: la noche, el balcón a un lado y el formulario al otro */
#demo .lamina { background: #0d1628; }
#demo .lamina::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 0% 0%, #24365e 0%, rgb(36 54 94 / 0) 60%), linear-gradient(180deg, #0f1a30 0%, #0b1322 100%);
}
#demo .toma { z-index: 1; }
#demo .toma img, #demo .toma video { object-position: 50% 72%; }
@media (min-width: 768px) {
  #demo .toma { right: auto; width: 40%; border-radius: var(--radio) 0 0 var(--radio); }
  .js #demo .nota {
    left: calc(40% + 4vw); right: calc(340px + 7vw); top: 0; bottom: 0; width: auto; padding: 0;
    display: flex; flex-direction: column; justify-content: center;
    background: none; border-radius: 0; color: #f3f6f3;
  }
  .js #demo .nota::before, .js #demo .nota::after { display: none; }
  .js #demo .nota h2 { padding-top: 0; font-size: clamp(36px, 3.7vw, 58px); letter-spacing: -.038em; }
  #demo .nota > p:not(.leyenda) { margin-top: 20px; color: rgb(243 246 243 / .76); max-width: 30ch; }
  #demo .leyenda { margin-top: 26px; color: rgb(243 246 243 / .5); font-size: 12px; max-width: 44ch; }
  #demo .forma { right: 3.4vw; top: 50%; translate: 0 -50%; }
  @media (prefers-reduced-motion: no-preference) {
    #demo .toma { clip-path: inset(0 100% 0 0); }
    #demo.activo .toma { clip-path: inset(0 0 0 0); transition: clip-path 1.4s cubic-bezier(.7, 0, .2, 1) .1s; }
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  #demo .toma { width: 30%; }
  .js #demo .nota { left: calc(30% + 3vw); right: calc(310px + 5vw); }
  #demo .forma { width: 310px; right: 2.4vw; }
}
@media (min-width: 768px) and (max-width: 960px) {
  #demo .toma { width: 34%; }
  .js #demo .nota { left: calc(34% + 4vw); right: 4vw; top: 7%; bottom: auto; justify-content: flex-start; }
  #demo .forma { left: calc(34% + 4vw); right: 4vw; width: auto; top: auto; bottom: 6%; translate: none; }
}
/* Cel: la toma llena el cuadro y el pie de imagen va encima, como en la portada */
@media (max-width: 767px) {
  #demo .lamina { background: #0d1628; }
  #demo .toma { border-radius: var(--radio); }
  #demo .toma img, #demo .toma video { object-position: 50% 78%; }
  #demo .toma::after {
    content: ""; position: absolute; inset: 45% 0 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgb(8 14 24 / 0) 0%, rgb(8 14 24 / .82) 78%);
  }
  .js #demo .nota .leyenda {
    display: block; position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px);
    margin: 0; padding: 0; color: rgb(243 246 243 / .72); font-size: 11px; line-height: 1.35;
  }
}

/* ===== 11-nov (noche), ronda 5: vida ===== */
/* El cel de la portada: cuerpo aparte para que se incline con el cursor y cambie de pantalla */
.portada-cel { background: none; box-shadow: none; perspective: 1100px; }
.portada-cel-cuerpo {
  position: absolute; inset: 0; overflow: hidden;
  background: #0b1210; border-radius: 5.4cqh;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .16), 0 5cqh 11cqh -3cqh rgb(0 0 0 / .8);
  transform: rotateY(calc(var(--gy, 0) * 1deg)) rotateX(calc(var(--gx, 0) * 1deg));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
#portada .portada-cel img { opacity: 0; transform: translateY(2.2cqh); transition: opacity .7s ease, transform .9s var(--curva); }
#portada .portada-cel img.ver { opacity: 1; transform: none; }
.portada-ir::after { content: "\2192"; margin-left: 2px; transition: transform .25s var(--curva); }
.portada-ir:hover::after { transform: translateX(4px); }
@media (max-width: 767px) {
  .portada-cel { background: #2e493d; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 14px 30px -10px rgb(0 0 0 / .7); perspective: none; }
  .portada-cel-cuerpo { position: static; background: none; border-radius: 0; box-shadow: none; transform: none; overflow: visible; }
  #portada .portada-cel img { display: none; }
  #portada .portada-cel img.fija { display: block; opacity: 1; transform: none; }
}
/* «Vivir»: la toma que miras crece */
@media (min-width: 768px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vivir-tomas { transition: grid-template-columns .7s var(--curva); }
  .vivir-tomas:has(.toma:nth-child(1):hover) { grid-template-columns: 1.3fr .7fr; }
  .vivir-tomas:has(.toma:nth-child(2):hover) { grid-template-columns: .7fr 1.3fr; }
}

/* ===== 11-nov (noche), ronda 6: tomas nuevas (obra terminada, torres de noche, azotea) ===== */
/* La obra: al llegar a «Terminada», la maqueta se funde en la foto (misma cámara que el cuadro 47) */
.obra-real { position: absolute; inset: 0; z-index: 1; opacity: var(--real, 0); pointer-events: none; }
.lamina .obra-real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Ahora entra: abre con las tres torres de noche y se acerca a la de en medio */
.cruce-a { object-position: 50% 50%; transform-origin: 50% 40%; }
@media (max-width: 767px) { .cruce-a { object-position: 47% 50%; } }
/* El cierre: la azotea, con un acercamiento muy lento */
#demo .toma img { object-position: 36% 50%; }
@media (min-width: 768px) { #demo .toma { width: 44%; } .js #demo .nota { left: calc(44% + 4vw); } }
@media (min-width: 961px) and (max-width: 1180px) { #demo .toma { width: 32%; } .js #demo .nota { left: calc(32% + 3vw); } }
@media (min-width: 768px) and (max-width: 960px) { #demo .toma { width: 34%; } .js #demo .nota { left: calc(34% + 4vw); } }
@media (max-width: 767px) { #demo .toma img { object-position: 30% 50%; } }
@media (prefers-reduced-motion: no-preference) {
  .activo .toma-lenta picture { animation: lenta 18s ease-in-out infinite alternate; transform-origin: 40% 55%; }
  @keyframes lenta { from { transform: scale(1); } to { transform: scale(1.07); } }
}