/* Variante con el logo original; conserva fotos, video y estructura. */
.footer-instagram{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:#b4d5fb}
.footer-instagram svg{flex:none}
.footer-instagram:hover{text-decoration:underline;color:#fff}
.footer-instagram:focus-visible{outline:2px solid #b4d5fb;outline-offset:4px}
.navigation{background:var(--background);color:var(--text)}
.navigation .brand{letter-spacing:normal;display:block;line-height:0;padding-block:var(--space-2)}
.navigation .brand img{height:88px;width:auto;max-width:none;object-fit:contain}
.nav-row{padding-block:var(--space-2)}
nav a[aria-current=true]{border-color:var(--accent)}
@media(max-width:767px){.navigation .brand img{height:68px}.nav-row{gap:0}}

/* Cabecera compacta: logo original sin deformar. */
.navigation .brand{padding-block:0;min-height:0}
.navigation .brand img{height:56px}
.nav-row{padding-block:var(--space-2)}
.hero-copy h1{font-size:clamp(2.5rem,5vw,4.5rem)}
@media(max-width:767px){.navigation .brand img{height:48px}.nav-row{padding-block:var(--space-1)}}
/* Ajuste solicitado: obra de fondo sin bandas negras y final sin recorte. */
.hero-stage{min-height:0;background:transparent}
.hero .film-layer{background:transparent}
.hero .film-layer video,.hero .film-canvas{object-fit:cover}
.hero-full-building{background:transparent;object-fit:contain;object-position:center}
/* Control disponible al navegar con teclado, sin cubrir el video en reposo. */
#film-toggle:not(:focus-visible){clip-path:inset(100%);width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden}
#film-toggle:focus-visible{clip-path:none;width:auto;height:auto;min-height:48px;padding:var(--space-2)}
@media(prefers-reduced-motion:reduce){.hero-stage{min-height:0}}
/* El espacio sobrante conserva la fotografía nítida por pedido del usuario. */
.hero-stage::after{content:'';position:absolute;inset:0;background:url('../assets/vilena-portada.jpg') center/cover;opacity:var(--scene-fade,0);pointer-events:none;z-index:1}
@media(prefers-reduced-motion:reduce){.hero-stage::after{display:none}}

/* Una sola fotografía: conserva exactamente el encuadre inicial durante el scroll. */
.hero-full-building{display:none}
.hero-stage::after{display:none}
/* Obras: archivo visual de arquitectura; fotos y pies sobre el fondo real. */
.galeria .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px}
.project-open{display:block;width:100%;padding:0;border:0;text-align:left;background:transparent;color:white;overflow:hidden;border-radius:0}
.project-open>img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:opacity 220ms ease}
.project-content{display:grid;grid-template-columns:1fr auto;gap:8px 20px;padding:20px 0 0}
.project-type{grid-column:1;font-size:14px;color:#ddd;line-height:1.5}
.project-title{grid-column:1;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.25;font-weight:500}
.project-link{grid-column:2;grid-row:1/3;align-self:center;font-size:14px;display:flex;gap:18px;align-items:center}
@media(hover:hover){.project-open:hover>img{opacity:.85}.project-open:hover .project-link{text-decoration:underline}}
.project-dialog{width:calc(100% - 64px);max-width:1600px;height:min(820px,calc(100svh - 64px));max-height:none;padding:0;border:0;border-radius:0;background:#17191b;color:#fff;overflow:hidden}
.project-dialog[open]{display:grid;grid-template-columns:minmax(0,1fr) 320px}
.project-dialog::backdrop{background:#000;opacity:.88}
.project-view{min-height:0;display:flex;align-items:center;justify-content:center;padding:24px;background:#101214}
.project-dialog #gallery-image{width:100%;height:100%;max-height:100%;object-fit:contain;margin:0;background:transparent}
.project-details{display:flex;flex-direction:column;padding:88px 32px 32px;min-height:0}
.project-dialog .dialog-header h2{font-size:28px;font-weight:500;line-height:1.18;letter-spacing:-.025em}
#project-description{font-size:15px;line-height:1.65;color:#c4c8cc;margin-top:24px}
.project-navigation{margin-top:auto;padding-top:32px}
.project-dialog #gallery-caption{font-size:14px;line-height:1.5;text-align:left;color:#c4c8cc;margin:0;min-height:42px}
.project-dialog .dialog-controls{justify-content:flex-start;gap:12px;margin:20px 0}
.project-dialog .dialog-controls button{background:transparent;color:white;border:1px solid #62676c;width:48px;height:48px;padding:0;font-size:24px;border-radius:50%}
#gallery-close{position:absolute;right:24px;top:20px;color:white;background:transparent;border:0;padding:8px;min-height:44px;font-size:14px;display:flex;gap:16px;align-items:center;z-index:2}
#gallery-close span{font-size:26px}
#project-thumbnails{display:flex;gap:8px;justify-content:flex-start;margin:0}
#project-thumbnails button{padding:3px;border:1px solid transparent;background:transparent;min-height:48px}
#project-thumbnails button[aria-pressed=true]{border-color:white}
#project-thumbnails img{width:64px;height:48px;object-fit:cover}
.project-dialog button:focus-visible{outline:2px solid #91c5ff;outline-offset:3px}
@media(max-width:767px){
.galeria .gallery-grid{grid-template-columns:1fr;gap:36px}.project-content{gap:6px 12px;padding-top:16px}.project-link{font-size:13px;gap:8px}
.project-dialog{width:100%;height:100svh;max-height:100svh;margin:0}
.project-dialog[open]{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
.project-view{padding:64px 12px 12px}.project-details{padding:20px 24px 24px}.project-dialog .dialog-header h2{font-size:24px}
#project-description{margin-top:10px;font-size:14px;line-height:1.5}.project-navigation{padding-top:16px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.project-dialog #gallery-caption{font-size:12px;min-height:0}.project-dialog .dialog-controls{margin:0;gap:8px}#project-thumbnails{grid-column:1/-1}#gallery-close{right:16px;top:10px}
}

/* Álbumes extensos: miniaturas desplazables sin ensanchar el visor. */
.project-details,.project-navigation{min-width:0}
#project-thumbnails{max-width:100%;overflow-x:auto;padding-bottom:6px}
#project-thumbnails button{flex:0 0 auto}

/* Manual VD: Roboto Regular para lectura y Bold para jerarquía. */
body{font-family:Roboto,Arial,sans-serif;font-weight:400}
h1,h2,h3,.hero-copy h2,.project-title,.project-dialog .dialog-header h2{font-weight:700}
.reasons{margin-top:var(--section-space);padding-top:var(--space-16);border-top:1px solid #ffffff60}
.reasons .section-heading{max-width:800px}
.reasons-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.reasons-grid article{padding:24px 0 0;border-top:2px solid #8fb8e6}
.reasons-grid h3{font-size:1.125rem;letter-spacing:0;line-height:1.35}
.reasons-grid p{font-size:1rem;margin-top:12px;line-height:1.6}
@media(max-width:900px){.reasons-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.reasons-grid{grid-template-columns:1fr;gap:28px}.reasons{padding-top:40px}}

/* Video dentro de los álbumes de obra. */
.project-view video{width:100%;height:100%;min-height:0;object-fit:contain;display:block}.project-view [hidden]{display:none!important}#project-thumbnails .video-thumb{position:relative} .video-thumb span{position:absolute;inset:0;display:grid;place-items:center;color:white;background:#0005;font-size:20px}

.reason-art{display:block;width:84px;height:84px;padding:0;margin:0 0 14px;border:0;background:transparent;color:#8fb8e6;cursor:pointer;touch-action:manipulation}.reason-art svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}.reason-art .frame{stroke:#fff}.reason-art .move{transform-origin:center;transition:transform .35s ease,stroke .35s ease}.reason-art:is(:hover,:focus-visible,[aria-pressed="true"]) .move{transform:translateX(5px);stroke:#fff}.reasons-grid article:nth-child(4) .reason-art:is(:hover,:focus-visible,[aria-pressed="true"]) .move{transform:translateY(-5px)}.reasons-grid article:nth-child(6) .reason-art:is(:hover,:focus-visible,[aria-pressed="true"]) .move{transform:rotate(35deg)}.reason-art:focus-visible{outline:2px solid #8fb8e6;outline-offset:4px;border-radius:3px}@media(max-width:540px){.reasons-grid article{position:relative;padding-left:82px;min-height:110px}.reason-art{position:absolute;left:0;top:22px;width:64px;height:64px}}@media(prefers-reduced-motion:reduce){.reason-art .move{transition:none}}
/* Continuous, restrained motion explaining each window benefit. */
.reasons-grid article:nth-child(1) .reason-art .move{animation:dimension-breathe 4s ease-in-out infinite}
.reasons-grid article:nth-child(2) .reason-art .move{animation:heat-flow 2.8s ease-in-out infinite}
.reasons-grid article:nth-child(3) .reason-art .move{animation:sound-flow 2.4s ease-out infinite}
.reasons-grid article:nth-child(4) .reason-art .move{animation:lock-settle 5s ease-in-out infinite}
.reasons-grid article:nth-child(5) .reason-art .move{animation:rain-fall 1.5s linear infinite}
.reasons-grid article:nth-child(6) .reason-art .move{animation:service-cycle 14s linear infinite}
.reason-art:is(:hover,:focus-visible,[aria-pressed="true"]) .move{stroke:#fff}
@keyframes dimension-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes heat-flow{0%{transform:translateX(-5px);opacity:.25}65%{opacity:1}100%{transform:translateX(4px);opacity:.25}}
@keyframes sound-flow{0%{transform:translateX(-4px);opacity:.2}65%{opacity:1}100%{transform:translateX(4px);opacity:.2}}
@keyframes lock-settle{0%,15%,85%,100%{transform:translateY(0)}35%,65%{transform:translateY(-3px)}}
@keyframes rain-fall{0%{transform:translate(4px,-12px);opacity:0}18%{opacity:.9}80%{opacity:.9}100%{transform:translate(-5px,15px);opacity:0}}
@keyframes service-cycle{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.reasons-grid .reason-art .move{animation:none;transition:none}}
/* Mobile: preserve the complete portrait video and give it its own row. */
@media(max-width:767px){
  .hero-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .hero-stage .hero-copy{grid-column:1;grid-row:1;padding:20px 20px 12px;align-self:start}
  .hero-copy h1{font-size:clamp(2rem,9vw,2.5rem)}
  .hero-copy .byline{margin-bottom:12px}
  .hero-copy h2{margin-top:12px}
  .hero-copy .hero-actions{gap:8px 20px;margin-top:12px}
  .hero-actions .button{padding:10px 14px;min-height:44px}
  .hero-stage .film-layer{grid-column:1;grid-row:2;width:100%;min-height:0;margin:0;align-self:stretch}
  .hero-stage .film-layer video,.hero-stage .film-canvas{object-fit:contain;object-position:center;inset:0;width:100%;height:100%}
  .hero-stage #film-toggle:not(:focus-visible){clip-path:none;width:auto;height:auto;min-height:44px;padding:8px 12px;left:auto;right:12px;bottom:12px;background:#101214d9;border:1px solid #ffffff80;overflow:visible}
  .container{width:calc(100% - 40px)}
  nav{gap:4px}nav a{font-size:14px}
  #reasons-title{scroll-margin-top:calc(var(--nav-height) + 20px)}
  .project-dialog{height:100dvh;max-height:100dvh;overflow-y:auto}
  .project-dialog[open]{grid-template-rows:minmax(180px,1fr) auto}
  .project-details{padding:12px 20px max(16px,env(safe-area-inset-bottom))}
  .project-dialog .dialog-header h2{font-size:22px}
}
@media(max-width:767px) and (max-height:700px){
  .hero{height:auto}.hero-stage{position:relative;top:auto;height:auto;grid-template-rows:auto 360px}
  .hero-stage .hero-copy,.hero-stage .film-layer{opacity:1;transform:none}
  .hero-stage::before{opacity:1}
}

/* Desktop accents: preserve the existing grid and typography. */
@media(min-width:768px){
  .reasons{position:relative;border-top-color:#8fb8e650}
  .reasons::before{content:'';position:absolute;top:-1px;left:0;width:80px;height:3px;background:#8fb8e6}
  .reasons-grid article{border-top-color:#91bbee80;background:linear-gradient(180deg,#16314c38,transparent 80%)}
  .reasons-grid .reason-art{color:#a0c9f5;background:#214e7b26;box-shadow:inset 0 0 0 1px #91bbee30}
  .reasons-grid .reason-art .frame{fill:#91bbee0d;stroke:#edf5ff}
  .reasons-grid p,.reasons .section-heading p{color:#dce5ef}
}

/* Mobile finish: existing copy, brand blue and architectural linework. */
@media(max-width:767px){
  .obra .narrow>p{text-align:justify;text-align-last:left;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;text-wrap:wrap;line-height:1.65;font-size:16px}
  .obra h2{text-align:center}
  .obra ul{text-align:left}
  .obra li::before{background:#91bbee;width:5px;height:5px;top:.7em}
  .reasons{position:relative;margin-top:64px;padding-top:36px;border-top:1px solid #8fb8e650}
  .reasons::before{content:'';position:absolute;top:-1px;left:0;width:64px;height:3px;background:#8fb8e6}
  .reasons .section-heading{gap:18px;margin-bottom:28px}
  .reasons .section-heading h2{font-size:clamp(1.8rem,7.8vw,2.4rem);line-height:1.15;text-wrap:balance}
  .reasons .section-heading p{font-size:16px;line-height:1.65;color:#dce5ef}
  .reasons-grid{grid-template-columns:1fr;gap:0;background:#091522b8;border-block:1px solid #91bbee65;padding-inline:16px}
  .reasons-grid article{position:relative;min-height:120px;padding:24px 0 24px 80px;border-top:1px solid #91bbee35}
  .reasons-grid article:first-child{border-top:0}
  .reasons-grid h3{font-size:17px;line-height:1.35;color:#fff}
  .reasons-grid p{font-size:15px;line-height:1.55;margin-top:8px;color:#dce5ef}
  .reasons-grid .reason-art{position:absolute;left:0;top:22px;width:62px;height:72px;margin:0;color:#a0c9f5;background:#214e7b26;border:1px solid #91bbee30}
  .reasons-grid .reason-art .frame{fill:#91bbee0d;stroke:#edf5ff}
  .reasons-grid .reason-art:active{background:#214e7b65}
}