/* ═══════════════════════════════════════════════════════════════════════════
   AMBIENTAZA · la película, los proyectos y la colección
   Se carga después de estilos.css. Lo de aquí es la parte inmersiva: imagen a
   sangre, noche verde y un solo acento cálido, el de la luz de la tarde.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --oro: #F0C688; --noche-3: #080C09; --vidrio: rgba(10, 15, 11, .56); }

/* ─── La barra, mientras pasa sobre la película ─── */
.en-cine .barra, .en-cine .barra.es-solida { background: linear-gradient(rgba(6, 10, 7, .66), rgba(6, 10, 7, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--claro); }
.en-cine .marca__nombre b { color: #D9B78C; }
.en-cine .barra .btn--principal { background: var(--claro); color: var(--tinta); }
.en-cine .barra .btn--principal:hover { background: var(--hoja); }

.btn--linea-clara { border-color: rgba(239, 234, 223, .55); color: var(--claro); }
.btn--linea-clara:hover { background: var(--claro); color: var(--tinta); border-color: var(--claro); }
.sello--vis { background: rgba(14, 20, 15, .5); }
.sello--vis::before { background: var(--oro); }

/* ═══════════ 1 · LA PELÍCULA ═══════════ */
.cine { position: relative; height: 560svh; background: var(--noche-3); color: var(--claro); }
.cine__fijo { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.cine__lienzo, .cine__poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine__poster { object-fit: cover; object-position: 50% 50%; opacity: var(--poster, 1); will-change: opacity; }
.cine__velo { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 10, 7, .9) 0%, rgba(6, 10, 7, .55) 34%, rgba(6, 10, 7, 0) 62%), linear-gradient(180deg, rgba(6, 10, 7, .5), rgba(6, 10, 7, 0) 20%); }
.cine__velo--fin { background: rgba(6, 10, 7, .58); opacity: 0; transition: opacity .7s; }
.cine.fin .cine__velo--fin { opacity: 1; }

.cine .etiqueta { color: rgba(239, 234, 223, .82); margin-bottom: 1rem; }
.cine h1 { font-size: clamp(2.35rem, 10.2vw, 5.6rem); line-height: .92; letter-spacing: -.032em; text-shadow: 0 2px 40px rgba(0, 0, 0, .35); }
.cine h1 em, .cine h2 em { color: var(--oro); }
.cine .bajada { color: rgba(239, 234, 223, .9); max-width: 36ch; margin-top: 1.15rem; }
.cine .btn--principal { background: var(--claro); color: var(--tinta); }
.cine .btn--principal:hover { background: var(--hoja); }

.cine__portada { position: absolute; left: var(--margen); right: var(--margen); bottom: clamp(5.4rem, 13svh, 8.5rem); max-width: 62rem; transition: opacity .5s, transform .7s var(--suave), visibility .5s; }
.cine.va .cine__portada { opacity: 0; transform: translate3d(0, -22px, 0); visibility: hidden; }
.cine__portada .acciones { margin-top: 1.6rem; align-items: center; }
.cine__baje { color: rgba(239, 234, 223, .7); padding-left: .4rem; }
.cine__baje::after { content: " ↓"; }

/* Los momentos: cada título con su línea; el que pasa sale hacia arriba y el que viene entra desde abajo. */
.cine__etapas { position: absolute; left: var(--margen); right: var(--margen); bottom: clamp(5.4rem, 13svh, 8.5rem); max-width: 35rem; opacity: 0; visibility: hidden; transform: translate3d(0, 18px, 0); transition: opacity .5s, transform .7s var(--suave), visibility .5s; }
.cine__etapas.es-viva { opacity: 1; visibility: visible; transform: none; }
.cine__etapas h2 { font-size: clamp(2.05rem, 7.4vw, 4.3rem); line-height: .98; font-weight: 640; font-stretch: 108%; letter-spacing: -.022em; text-shadow: 0 2px 30px rgba(0, 0, 0, .4); text-wrap: balance; }
.cine__etapas ol { list-style: none; display: grid; }
.cine__etapas li { grid-area: 1 / 1; align-self: end; visibility: hidden; transition: visibility 0s .5s; }
.cine__etapas li.es-activa { visibility: visible; transition: visibility 0s; }
.cine__etapas h2, .cine__etapas h2 + p { opacity: 0; transform: translate3d(0, -.5rem, 0); transition: opacity .32s, transform .5s var(--suave); }
.cine__etapas li.es-activa ~ li h2, .cine__etapas li.es-activa ~ li h2 + p { transform: translate3d(0, .6rem, 0); }
.cine__etapas li.es-activa h2, .cine__etapas li.es-activa h2 + p { opacity: 1; transform: none; transition: opacity .45s .14s, transform .6s var(--suave) .14s; }
.cine__etapas h2 em { display: block; margin-top: .04em; padding-bottom: .06em; }
.cine__etapas h2 + p { margin-top: .9rem; max-width: 40ch; font-size: clamp(1rem, .45vw + .93rem, 1.2rem); line-height: 1.42; color: rgba(239, 234, 223, .92); text-shadow: 0 1px 18px rgba(0, 0, 0, .45); }


.cine__final { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: var(--barra) var(--margen) 4rem; opacity: 0; visibility: hidden; transform: translate3d(0, 18px, 0); transition: opacity .6s, transform .8s var(--suave), visibility .6s; }
.cine.fin .cine__final { opacity: 1; visibility: visible; transform: none; }
.cine__final h2 { max-width: 14ch; font-size: clamp(2.5rem, 8vw, 6rem); line-height: .95; text-wrap: balance; }
.cine__final h2 em { display: block; }
.cine__final p { max-width: 44ch; margin-top: 1.3rem; font-size: clamp(1rem, .45vw + .93rem, 1.2rem); line-height: 1.45; color: rgba(239, 234, 223, .9); }
.cine__final .btn { margin-top: 1.8rem; }

.cine__aviso { position: absolute; left: var(--margen); bottom: .9rem; font-size: .5rem; color: rgba(239, 234, 223, .5); }

/* ═══════════ 2 · LOS PROYECTOS: antes y después ═══════════ */
.proyectos { background: var(--noche); color: var(--claro); padding-block: clamp(4.5rem, 12vh, 9rem); }
.proyectos .bajada { color: var(--claro-2); max-width: 44ch; }
.proyectos__cuerpo { display: grid; gap: 1.4rem; margin-top: clamp(2rem, 5vh, 3.4rem); }
.proyectos__lista { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); }
.proyectos__lista::-webkit-scrollbar { display: none; }
.proyectos__grupo { display: contents; }
.proyectos__grupo > p { display: none; }
.proyectos__lista button { flex: none; appearance: none; border: 1px solid rgba(239, 234, 223, .22); background: none; color: var(--claro-2); font: inherit; font-size: .84rem; font-weight: 560; font-stretch: 106%; padding: .62em 1em; border-radius: 99px; cursor: pointer; white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.proyectos__lista button:hover { color: var(--claro); border-color: rgba(239, 234, 223, .5); }
.proyectos__lista button[aria-selected="true"] { background: var(--claro); color: var(--tinta); border-color: var(--claro); }

.proyecto { display: grid; gap: 1.3rem; }
.js .proyecto[hidden] { display: none; }
html:not(.js) .proyecto + .proyecto { margin-top: 3rem; }

.compara { position: relative; overflow: hidden; background: #000; aspect-ratio: 4 / 5; --x: 50%; user-select: none; -webkit-user-select: none; }
.compara img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compara__despues { clip-path: inset(0 0 0 var(--x)); }
.compara__linea { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--claro); pointer-events: none; }
.compara__linea::after { content: "‹ ›"; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 50%; background: var(--claro); color: var(--tinta); font-size: 1.05rem; font-weight: 640; letter-spacing: .12em; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.compara input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.compara input[type="range"]:focus-visible + .compara__linea::after { outline: 3px solid var(--hoja); outline-offset: 3px; }
.compara__rot { position: absolute; top: 10px; padding: .32em .6em; background: rgba(14, 20, 15, .62); font-size: .58rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; transition: opacity .3s; }
.compara__rot--a { left: 10px; }
.compara__rot--d { right: 10px; color: var(--oro); }
.compara__aviso { position: absolute; left: 10px; bottom: 10px; font-size: .5rem; color: rgba(239, 234, 223, .7); pointer-events: none; }

.proyecto__texto .mono { color: var(--hoja); }
.proyecto__texto h3 { font-size: clamp(1.7rem, 3.1vw + .6rem, 3rem); line-height: 1; margin-top: .7rem; text-wrap: balance; }
.proyecto__hace { margin-top: 1rem; color: rgba(239, 234, 223, .86); max-width: 36ch; line-height: 1.42; }
.proyecto__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.3rem; }
.proyecto__chips li { border: 1px solid rgba(239, 234, 223, .2); padding: .42em .75em; font-size: .6rem; color: var(--claro-2); }
.proyecto__texto .btn { margin-top: 1.6rem; }

/* ═══════════ 3 · LA COLECCIÓN ═══════════ */
.coleccion { background: var(--papel-3); padding-block: clamp(4.5rem, 12vh, 9rem) clamp(3.5rem, 9vh, 7rem); }
.coleccion__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; }
.coleccion__flechas { display: none; gap: .5rem; }
.coleccion__flechas button { appearance: none; width: 52px; height: 52px; border: 1px solid var(--linea); background: none; color: var(--tinta); font-size: 1.2rem; cursor: pointer; border-radius: 50%; transition: background .3s, color .3s; }
.coleccion__flechas button:hover { background: var(--tinta); color: var(--papel); }
.coleccion__carril { display: flex; gap: 1rem; margin-top: clamp(2rem, 5vh, 3.2rem); padding-inline: var(--margen); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.coleccion__carril::-webkit-scrollbar { display: none; }
.forma { flex: 0 0 min(74vw, 330px); scroll-snap-align: start; }
.forma figure { position: relative; overflow: hidden; background: #E6D6C2; }
.forma img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.4s var(--suave); }
.forma:hover img { transform: scale(1.05); }
.forma__num { color: var(--hoja-2); margin-top: 1.05rem; }
.forma h3 { margin-top: .25rem; font-size: 1.7rem; }
.forma h3 + p { margin-top: .45rem; color: var(--tinta-2); max-width: 27ch; line-height: 1.38; }
.forma__dato { margin-top: .8rem; color: var(--tinta-3); font-size: .6rem; }
.forma--suya figure { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--papel-2); background-image: linear-gradient(var(--linea-s) 1px, transparent 1px), linear-gradient(90deg, var(--linea-s) 1px, transparent 1px); background-size: 28px 28px; border: 1px dashed var(--linea); }
.forma--suya svg { width: 58%; color: var(--verde); }
.forma--suya a { display: inline-block; margin-top: .9rem; font-weight: 640; font-stretch: 110%; font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: .2em; }

/* ═══════════ Lo real: puente, clips de fábrica y plantas ═══════════ */
.puente { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4em 1em; margin-bottom: clamp(2.4rem, 6vh, 4rem); padding-bottom: 1.3rem; border-bottom: 1px solid var(--linea); font-size: clamp(1.15rem, 1.5vw + .7rem, 1.9rem); line-height: 1.2; color: var(--tinta-3); }
.puente b { color: var(--tinta); font-weight: 640; font-stretch: 110%; }
.paso figure video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; filter: saturate(.92) contrast(1.03); }
.paso figure video.es-lista { opacity: 1; }
.paso .sello { z-index: 2; }
.paso figure { transition: opacity .6s; }
.fabrica__carril:has(.es-activa) .paso:not(.es-activa) figure { opacity: .5; }
.plantas { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin-top: 2.2rem; max-width: 30rem; }
.plantas img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.plantas span { display: block; margin-top: .45rem; font-size: .54rem; color: var(--tinta-2); }

/* ═══════════ Desde 700 px ═══════════ */
@media (min-width: 700px) {
  .cine__aviso { left: auto; right: var(--margen); font-size: .54rem; }
  .compara { aspect-ratio: 3 / 2; }
  .coleccion__flechas { display: flex; }
  .forma { flex-basis: clamp(270px, 24vw, 350px); }
}

/* ═══════════ Desde 900 px ═══════════ */
@media (min-width: 900px) {
  .cine__velo { background: linear-gradient(90deg, rgba(6, 10, 7, .78) 0%, rgba(6, 10, 7, .34) 44%, rgba(6, 10, 7, 0) 68%), linear-gradient(0deg, rgba(6, 10, 7, .62) 0%, rgba(6, 10, 7, 0) 30%), linear-gradient(180deg, rgba(6, 10, 7, .45), rgba(6, 10, 7, 0) 18%); }
  .cine__velo--fin { background: rgba(6, 10, 7, .58); }
  .cine__portada, .cine__etapas { bottom: clamp(6.2rem, 15svh, 9.5rem); }
  .cine__etapas { max-width: 52rem; }
  .proyectos__cuerpo { grid-template-columns: 15.5rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
  .proyectos__lista { display: block; overflow: visible; margin: 0; padding: 0; position: sticky; top: calc(var(--barra) + 1.5rem); }
  .proyectos__grupo { display: block; }
  .proyectos__grupo + .proyectos__grupo { margin-top: 1.5rem; }
  .proyectos__grupo > p { display: block; color: rgba(239, 234, 223, .45); font-size: .58rem; margin-bottom: .45rem; }
  .proyectos__lista button { display: block; width: 100%; text-align: left; border: 0; border-left: 2px solid rgba(239, 234, 223, .14); border-radius: 0; padding: .5em 0 .5em 1em; font-size: .98rem; white-space: normal; }
  .proyectos__lista button:hover { border-color: rgba(239, 234, 223, .5); }
  .proyectos__lista button[aria-selected="true"] { background: none; color: var(--claro); border-color: var(--oro); }
  .proyecto { grid-template-columns: minmax(0, 1.62fr) minmax(15rem, 1fr); gap: clamp(1.6rem, 3vw, 3.2rem); align-items: end; }
}

/* ═══════════ Movimiento reducido: la terraza ya entregada, sin recorrido ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .cine { height: auto; }
  .cine__fijo { position: relative; height: 100svh; }
  .cine__lienzo, .cine__etapas, .cine__final, .cine__baje, #ver-pelicula { display: none; }
  .paso figure video { display: none; }
}
@media print {
  .cine { height: auto; } .cine__fijo { position: relative; height: 60vh; }
  .cine__lienzo, .cine__etapas, .cine__final { display: none; }
}