/* Casa del Árbol: vídeo de obra con scroll. Usa los tokens de styles.css y la tipografía de la landing. */
.obra-v { height: 760vh; background: #14171b; color: var(--dark-ink, #f4f1ea); }
.obra-v__fijo { position: sticky; top: 0; height: 100dvh; overflow: hidden; isolation: isolate; }
.obra-v__poster, .obra-v__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.obra-v__video { opacity: 0; transition: opacity .5s; }
.obra-v.is-lista .obra-v__video { opacity: 1; }
.obra-v__fijo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(20 23 27 / .55) 0%, transparent 26%, transparent 55%, rgb(20 23 27 / .78) 100%); }
.obra-v__capa { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; pointer-events: none;
  padding: calc(var(--nav-h) + 28px) max(16px, 4vw) 24px; }
.obra-v__antetitulo { color: rgb(244 241 234 / .72); }
.obra-v__titulo { margin-top: 12px; font-size: clamp(2.6rem, 1.2rem + 5vw, 6.4rem); line-height: .95; letter-spacing: -.05em; font-weight: 500;
  text-shadow: 0 1px 24px rgb(0 0 0 / .35); transition: opacity .5s; }
.obra-v.is-avanzada .obra-v__titulo, .obra-v.is-avanzada .obra-v__antetitulo { opacity: 0; }
.obra-v__fases { list-style: none; margin: 0; padding: 0; }
.obra-v__cap { position: absolute; left: max(16px, 4vw); right: max(16px, 4vw); bottom: 104px; max-width: 540px;
  opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.obra-v__cap.is-activo { opacity: 1; transform: none; }
.obra-v__cap .plano { color: #e0b27a; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
.obra-v__cap h2, .obra-v__cap h3 { margin-top: 8px; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.6rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.05;
  text-shadow: 0 1px 16px rgb(0 0 0 / .55); }
.obra-v__cap p { margin-top: 10px; max-width: 42ch; color: rgb(244 241 234 / .88); text-shadow: 0 1px 10px rgb(0 0 0 / .6); }
.obra-v__pie { margin-top: auto; }
.obra-v__nota { margin-top: 12px; max-width: 80ch; color: rgb(244 241 234 / .78); font-size: .74rem; line-height: 1.5; }
.obra-v__aviso { position: absolute; z-index: 2; right: max(16px, 4vw); bottom: 64px; display: flex; gap: 8px; align-items: center;
  color: rgb(244 241 234 / .7); transition: opacity .4s; }
.obra-v.is-avanzada .obra-v__aviso { opacity: 0; }

.fases-g { padding: var(--section) 0; }
.fases-g__lista { list-style: none; margin: clamp(40px, 6vw, 88px) 0 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.fases-g__lista figure { margin: 0; }
.fases-g__lista img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); }
.fases-g__lista figcaption { margin-top: 10px; display: flex; gap: 12px; align-items: baseline; font-weight: 500; }
.fases-g__lista figcaption .plano { color: var(--accent); }
.fases-g__ficha { margin-top: clamp(40px, 5vw, 64px); max-width: 860px; }

/* Sin movimiento: el vídeo no se rasca; se ve la casa terminada y la cuadrícula de fases cuenta la obra. */
@media (prefers-reduced-motion: reduce) {
  .obra-v { height: 100dvh; }
  .obra-v__video, .obra-v__aviso { display: none; }
  .obra-v__cap:last-child { opacity: 1; transform: none; }
}
.obra-v.sin-video { height: 100dvh; }
.obra-v.sin-video .obra-v__cap:last-child { opacity: 1; transform: none; }
.obra-v.sin-video .obra-v__aviso { display: none; }

@media (max-width: 640px) {
  .obra-v__cap { bottom: 120px; }
  .obra-v__aviso { display: none; }
}

/* Portada de la landing: el vídeo es el hero. Al empezar se lee el lema; al bajar, las fases. */
.obra-v--portada { height: 100dvh; min-height: 640px; }
.obra-v--portada .obra-v__capa { justify-content: flex-end; }
.obra-v__intro { max-width: 1320px; padding-bottom: clamp(20px, 4vh, 48px); }
.obra-v--portada .obra-v__titulo { font-size: clamp(3.4rem, 1rem + 6.6vw, 8.6rem); line-height: .94; letter-spacing: -.055em; }
.obra-v__sub { margin-top: 22px; max-width: 38ch; font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); color: rgb(244 241 234 / .86);
  text-shadow: 0 1px 14px rgb(0 0 0 / .5); }
.obra-v__acciones { margin-top: 28px; display: flex; align-items: center; gap: 28px; pointer-events: auto; }
.obra-v__intro { transition: opacity .5s, transform .6s var(--ease); }
.obra-v.is-avanzada .obra-v__intro { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.obra-v.is-avanzada .obra-v__acciones { pointer-events: none; }
.obra-v--portada .obra-v__fijo::after { background: linear-gradient(90deg, rgb(20 23 27 / .7) 0%, rgb(20 23 27 / .3) 38%, transparent 62%),
  linear-gradient(180deg, rgb(20 23 27 / .55) 0%, transparent 22%, transparent 50%, rgb(20 23 27 / .8) 100%); }
@media (prefers-reduced-motion: reduce) { .obra-v--portada { height: 100dvh; } .obra-v--portada .obra-v__cap:last-child { opacity: 0; } }
.obra-v--portada.sin-video .obra-v__cap:last-child { opacity: 0; }
.obra-v--portada .obra-v__intro { margin-top: auto; }
.obra-v--portada .obra-v__pie { margin-top: 0; }
.obra-v__fase { margin-bottom: 10px; color: #e0b27a; text-shadow: 0 1px 8px rgb(0 0 0 / .6); min-height: 1.2em; }
.obra-v--portada .proceso__barra i { transition: transform .25s linear; }
.obra-v__nota a { pointer-events: auto; color: #e0b27a; margin-right: 10px; white-space: nowrap; }
.obra-v__nota a:hover { text-decoration: underline; }