/* Home canvas extends behind browser safe areas; light editorial panels stay light. */
html:has(body.page-index),body.page-index{background:#101a15}
.page-index .opening-copy,.page-index #obras-proyectos{background:var(--paper);color:var(--ink)}
.page-index .reference-header{padding-top:max(14px,env(safe-area-inset-top));padding-left:max(4%,env(safe-area-inset-left));padding-right:max(4%,env(safe-area-inset-right))}
.page-index .film-skip{left:max(4%,env(safe-area-inset-left));bottom:max(20px,calc(12px + env(safe-area-inset-bottom)))}
.page-index .persistent-wa{right:max(4%,env(safe-area-inset-right));bottom:max(20px,calc(12px + env(safe-area-inset-bottom)))}
/* Shared quiet spacing, retaining the approved white sink highlight and dark hardware. */
.page-index .film-context-mobile{padding-block:clamp(24px,4vw,56px)}
.page-index .film-context-mobile figcaption{font-size:14px;line-height:1.5}
@media(min-width:901px){
 .page-index .mobile-chapter-break{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:end;padding:42px 8%;background:#1a3024;color:var(--paper);border-top:1px solid #ffffff1f}
 .page-index .mobile-chapter-break p{margin:0 0 10px;color:#d8e2db;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
 .page-index .mobile-chapter-break h2{margin:0;font-size:clamp(28px,3vw,42px);max-width:17ch}
 .page-index .mobile-chapter-break a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);text-decoration:none;border-bottom:1px solid #ffffff80}
}
@media(max-width:760px){
 .page-index .reference-header{padding-inline:max(22px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-right))}
 .page-index .film-skip{left:max(22px,env(safe-area-inset-left))}
 .page-index .persistent-wa{right:max(22px,env(safe-area-inset-right))}
 .page-index .film-context-mobile figcaption{font-size:13px}
}
/* Intact landscape footage gets a deliberate upper frame and nearby caption/actions. */
@media(max-width:760px) and (min-height:501px){
 .page-index #parque-recorrido{justify-content:flex-start;padding-top:calc(max(88px,env(safe-area-inset-top)) + 56.25vw + 24px);gap:16px}
 .page-index #parque-recorrido>video,.page-index #parque-recorrido>[data-motion-poster]{position:absolute;left:0;right:0;top:max(88px,env(safe-area-inset-top));bottom:auto;width:100%;height:56.25vw;object-fit:contain;transform:none;max-width:none}
 .page-index #parque-recorrido::after{display:none}
 .page-index #parque-recorrido .film-caption,.page-index #parque-recorrido .film-controls{position:relative;inset:auto;margin:0;max-width:100%}
}

/* A contained landscape film needs an authored lower panel on a phone. It keeps
   the whole room visible while placing the chapter name, action and project path
   across the rest of the pinned viewport instead of leaving an unused dark field. */
@media(max-width:760px) and (min-height:501px){
 .page-index #parque-recorrido{height:100svh;min-height:0;padding:0;display:grid;grid-template:calc(max(88px,env(safe-area-inset-top)) + 56.25vw) minmax(0,1fr)/1fr;gap:0}
 .page-index #parque-recorrido>video,.page-index #parque-recorrido>[data-motion-poster]{grid-area:1/1;top:max(88px,env(safe-area-inset-top));height:56.25vw}
 .page-index #parque-recorrido .film-caption{grid-area:2/1;align-self:start;padding:28px 22px 0;border-top:1px solid #ffffff26}
 .page-index #parque-recorrido .film-caption p{margin:0 0 12px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#d8e2db}
 .page-index #parque-recorrido .film-caption h2{max-width:11ch;margin:0;font-size:clamp(31px,9vw,40px);line-height:1.05;text-wrap:balance}
 .page-index #parque-recorrido .parque-project-link{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;color:var(--paper);font-size:13px;text-decoration:none;border-bottom:1px solid #ffffff80}
 .page-index #parque-recorrido .film-controls{grid-area:2/1;align-self:end;padding:0 22px max(142px,calc(122px + env(safe-area-inset-bottom)));border:0}
 .page-index #parque-recorrido .film-controls button{min-width:176px}
 .page-index #parque-recorrido .film-controls::before{content:'Deslice para recorrer';display:block;margin-bottom:14px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#d8e2db}
 html[lang=en] .page-index #parque-recorrido .film-controls::before{content:'Scroll to explore'}
}

/* In short landscape, start the contained room frame below the compact header
   and use the remaining viewport instead of exposing a dark strip above it. */
@media(max-height:500px){
 .page-index #parque-recorrido{height:100svh!important;min-height:0;padding:0;display:grid;grid-template:72px minmax(0,1fr)/minmax(0,1.16fr) minmax(280px,.84fr);background:#101a15}
 .page-index #parque-recorrido>video,.page-index #parque-recorrido>[data-motion-poster]{position:relative;inset:auto;grid-area:2/1;width:100%;height:100%;object-fit:contain;object-position:center;transform:none}
 .page-index #parque-recorrido .film-caption{position:relative;inset:auto;grid-area:2/2;align-self:start;width:100%;box-sizing:border-box;margin:0;padding:28px 32px 0;max-width:none;background:#101a15}
 .page-index #parque-recorrido .film-controls{position:relative;inset:auto;grid-area:2/2;align-self:end;width:100%;box-sizing:border-box;margin:0;padding:0 32px 82px;max-width:none;text-align:left;background:#101a15}
}

/* Portrait films fill the phone stage; keep the full-height stable pin. */
@media(max-width:760px) and (min-height:501px){
 .page-index #recorrido-mujeres>video,.page-index #recorrido-mujeres>[data-motion-poster],
 .page-index #obra>video,.page-index #obra>[data-motion-poster]{width:100%;height:100%;top:0;left:0;object-fit:cover;object-position:50% 50%}
}