/* La película del día (Flow) y las fotos de lugar */
.pelicula { position: relative; height: min(92vh, 860px); min-height: 520px; overflow: hidden; border-top: 1px solid var(--linea); background: #0b0d10; color: #f6f2e8; }
.pelicula canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: ew-resize; touch-action: pan-y; }
.pelicula.arrastrando canvas { cursor: grabbing; }
.pel-velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 10, 12, .62), rgba(8, 10, 12, .1) 46%, transparent 60%), linear-gradient(0deg, rgba(8, 10, 12, .55), transparent 30%); }
.pel-txt { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); max-width: 460px; display: grid; gap: 18px; pointer-events: none; }
.pel-txt .mono { color: rgba(246, 242, 232, .72); }
.pel-txt h2 { font-size: clamp(40px, 4.6vw, 78px); line-height: .95; font-weight: 720; letter-spacing: -.03em; font-variation-settings: 'wdth' 82; }
.pel-txt h2 em { font-style: normal; color: var(--pel, var(--sol)); font-variation-settings: 'wdth' 125; }
.pel-txt p:last-child { color: rgba(246, 242, 232, .82); }
.pel-lectura { position: absolute; right: var(--gutter); bottom: 96px; display: grid; justify-items: end; gap: 4px; pointer-events: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.pel-lectura b { font: 600 clamp(34px, 3.6vw, 58px)/1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pel-lectura span { color: rgba(246, 242, 232, .78); }
.pel-pista { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); color: rgba(246, 242, 232, .7); pointer-events: none; display: flex; gap: 10px; align-items: center; }
.pel-pista::before, .pel-pista::after { content: ''; width: 34px; height: 1px; background: currentColor; }

/* atlas: tres lugares, de cerca */
.lugares { padding: 110px var(--gutter) 70px; border-top: 1px solid var(--linea); }
.lugares-cab { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 34px; }
.lugares-cab h2 { font-size: clamp(36px, 4vw, 64px); line-height: .95; font-weight: 720; letter-spacing: -.03em; font-variation-settings: 'wdth' 82; }
.lugares-cab p { color: var(--soft); max-width: 380px; }
.lugares ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lugares a { display: grid; gap: 12px; }
.lugares figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; position: relative; background: #111; }
.lugares img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.lugares a:hover img { transform: scale(1.12); }
.lugares figure::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.lugares a:hover figure::after { transform: none; }
.lugares .l-nom { font-size: 22px; font-weight: 650; font-variation-settings: 'wdth' 90; }
.lugares .mono { color: var(--soft); }

/* proyectos: la foto del lugar sobre su mapa; al pasar, se levanta y deja ver las curvas */
.ficha a { position: relative; }
.f-foto { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--linea); clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); pointer-events: none; }
.ficha a:hover .f-foto, .ficha a:focus-visible .f-foto { clip-path: inset(0 0 100% 0); }
.vista-mapa .f-foto, .vista-linea .f-foto { aspect-ratio: 3 / 2; }

/* ficha de proyecto: la visita al lugar */
.sitio-foto { margin: 0; position: relative; height: min(78vh, 760px); overflow: hidden; border-top: 1px solid var(--linea); }
.sitio-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08) translateY(var(--par, 0px)); }
.sitio-foto figcaption { position: absolute; left: var(--gutter); bottom: 26px; color: #f6f2e8; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }

@media (max-width: 900px) {
  .pelicula { height: 78vh; min-height: 460px; }
  .pel-txt { top: auto; bottom: 150px; transform: none; right: var(--gutter); }
  .pel-txt h2 { font-size: 38px; }
  .pel-lectura { bottom: 86px; }
  .pel-lectura b { font-size: 30px; }
  .pel-pista { display: none; }
  .lugares ol { grid-template-columns: 1fr; }
  .lugares figure { aspect-ratio: 16 / 10; }
  .lugares-cab { flex-direction: column; align-items: start; }
  .vista-mapa .f-foto { display: none; }
  .sitio-foto { height: 56vh; }
}