/* Hero de Lugares — elementos de la referencia (buildcover).
   La foto real manda a pantalla completa; título en una línea (Archivo 300 / 600) centrado en altura a la izquierda;
   una sola tarjeta grande en la esquina con la obra siguiente y un botón redondo; fundido 0,5 s, la saliente con 0,2 s de retardo. */
.lg-hero{position:relative;height:90svh;min-height:620px;overflow:hidden;background:var(--lg-fondo-oscuro);color:var(--lg-papel)}
.lg-hero__fotos,.lg-hero__foto{position:absolute;inset:0;width:100%;height:100%}
.lg-hero__foto{object-fit:cover;object-position:var(--pos,50% 50%);opacity:0;transition:opacity .5s ease .2s}
.lg-hero__foto.is-on{opacity:1;transition-delay:0s;z-index:1}
/* taste-skill-ignore: capa pedida por el cliente bajo el header */
/* capa translúcida bajo el header (Impeccable layout): franja superior en carbón que se mezcla con la foto (multiplicar) y se desvanece antes de la obra */
/* velo neutro solo donde va el texto */
/* taste-skill-ignore: velo neutro bajo texto sobre foto (excepción de Taste) */
/* velo del mensaje: desde la izquierda, a la altura del texto; un toque abajo para las placas */
.lg-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(var(--lg-velo),.62) 0%,rgba(var(--lg-velo),.38) 34%,rgba(var(--lg-velo),0) 62%),linear-gradient(0deg,rgba(var(--lg-velo),.45) 0%,rgba(var(--lg-velo),0) 22%)}

.lg-hero__texto{position:absolute;z-index:6;left:max(var(--lg-margen),env(safe-area-inset-left,0px));right:max(var(--lg-margen),env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}
.lg-hero__titulo{margin:0 0 28px;font-size:clamp(48px,6vw,96px);line-height:1;letter-spacing:-.035em;transition:opacity .3s ease;text-wrap:balance}
.lg-linea{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.lg-linea>span{display:block}
span.lg-linea{font-weight:300}
b.lg-linea{font-weight:600}


/* Las tres obras: placas discretas abajo a la derecha, cada una con foto y título.
   La actual en papel cálido; las otras en el vidrio oscuro del botón del header (ninguna es foto sobre foto).
   Flecha para avanzar en musgo, para equilibrar el óxido. */
.lg-obras{position:absolute;z-index:6;right:max(var(--lg-margen),env(safe-area-inset-right,0px));bottom:calc(40px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px}
.lg-ob{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;width:clamp(170px,13.5vw,196px);padding:6px 12px 6px 6px;border:0;border-radius:14px;cursor:pointer;text-align:left;font-size:15px;font-weight:500;line-height:1.2;background:rgba(var(--lg-velo),.42);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);color:var(--lg-papel);transition:background-color .3s ease,color .3s ease,transform .25s var(--lg-ease-salida)}
.lg-ob img{width:44px;height:44px;border-radius:9px;object-fit:cover}
.lg-ob.is-on{background:var(--lg-papel);color:var(--lg-tinta)}
.lg-ob:not(.is-on):hover{background:rgba(var(--lg-velo),.62);transform:translateY(-2px)}
.lg-ob:focus-visible,.lg-obras__sig:focus-visible{outline:2px solid var(--lg-papel);outline-offset:3px}
.lg-obras__sig{flex:0 0 auto;width:56px;height:56px;border:0;border-radius:50%;background:var(--lg-musgo);color:var(--lg-papel);display:grid;place-items:center;cursor:pointer;transition:background-color .25s ease,transform .2s ease}
.lg-obras__sig svg{width:20px;height:13px}
.lg-obras__sig path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lg-obras__sig:hover{background:var(--lg-musgo-profundo)}
.lg-obras__sig:active{transform:scale(.94)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lg-ob{background:rgba(var(--lg-velo),.8)}}

@media (max-width:820px){
  .lg-hero{height:100svh}
  .lg-hero__texto{right:max(16px,env(safe-area-inset-right,0px))}
  .lg-hero__titulo{font-size:46px;line-height:1.02;margin-bottom:22px;text-wrap:wrap}
  .lg-hero__foto{object-position:var(--pos-m,var(--pos,50% 50%))}
  /* taste-skill-ignore: velo neutro bajo texto */
  .lg-hero::after{background:linear-gradient(0deg,rgba(var(--lg-velo),.45) 0%,rgba(var(--lg-velo),.4) 50%,rgba(var(--lg-velo),.2) 100%)}

  .lg-obras{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));gap:6px}
  .lg-ob{flex:1;width:auto;grid-template-columns:1fr;gap:6px;padding:5px 5px 8px;font-size:13px;border-radius:12px}
  .lg-ob img{width:100%;height:44px;border-radius:8px}
  .lg-obras__sig{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.lg-hero__foto,.lg-ob,.lg-ob img,.lg-obras__sig{transition:none}}

/* ===== Movimiento del hero (Impeccable animate) =====
   Momento focal "se vuelve", en el orden del croquis aprobado: línea de construcción → B/N → color.
   · La foto aparece en blanco y negro, contrastada y algo desenfocada (como un dibujo) y se asienta en color.
   · Cada línea del título se levanta desde su línea base por una máscara.
   · Entre obras: la foto nueva se descubre con un barrido de recorte desde la izquierda (como una lámina) y pasa
     de B/N a color; el título sale hacia arriba y el nuevo se vuelve a construir sobre sus líneas.
   · Apoyo: Conócenos se descubre de izquierda a derecha y su flecha se dibuja; las placas suben en escalonado;
     la flecha musgo llega al final.
   Keyframes con fill both: sin JS todo queda visible. */
@keyframes lg-lamina{0%{clip-path:inset(0 0 0 100%)}100%{clip-path:inset(0 0 0 0)}}
@keyframes lg-levanta{from{transform:translateY(108%)}to{transform:none}}
@keyframes lg-sale{from{transform:none}to{transform:translateY(-108%)}}
@keyframes lg-descubre{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lg-dibuja{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lg-sube{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes lg-llega{0%{opacity:0;transform:scale(.55) rotate(-45deg)}100%{opacity:1;transform:none}}
@keyframes lg-aparece{from{opacity:0}to{opacity:1}}

.lg-hero__foto.is-entrando{animation:lg-lamina 1.1s cubic-bezier(.65,0,.25,1) both;z-index:2;opacity:1;transition:none}
.lg-hero__foto.is-saliente{z-index:1;opacity:1;transition:none}

.lg-linea{position:relative}
.lg-linea>span{animation:lg-levanta .85s cubic-bezier(.16,1,.3,1) both}
span.lg-linea>span{animation-delay:.5s}
b.lg-linea>span{animation-delay:.64s}
.lg-hero .lg-hero__titulo.is-saliendo .lg-linea>span{animation:lg-sale .28s cubic-bezier(.7,0,.84,0) both}
.lg-hero__titulo.is-saliendo b.lg-linea>span{animation-delay:.05s}
.lg-hero .lg-hero__titulo.is-entrando span.lg-linea>span{animation:lg-levanta .75s cubic-bezier(.16,1,.3,1) 0s both}
.lg-hero .lg-hero__titulo.is-entrando b.lg-linea>span{animation:lg-levanta .75s cubic-bezier(.16,1,.3,1) .12s both}

.lg-btn{animation:lg-aparece .6s ease .3s both}
.lg-hero__acciones{display:flex;flex-wrap:wrap;gap:12px}
.lg-hero__texto .lg-accion{animation:lg-descubre .7s cubic-bezier(.65,0,.25,1) 1s both}
.lg-hero__texto .lg-accion+.lg-accion{animation-delay:1.12s}
.lg-hero__texto .lg-accion svg path{stroke-dasharray:1;animation:lg-dibuja .6s cubic-bezier(.45,0,.25,1) 1.5s both}
.lg-ob{animation:lg-sube .6s cubic-bezier(.16,1,.3,1) both}
.lg-ob:nth-child(1){animation-delay:1.15s}.lg-ob:nth-child(2){animation-delay:1.25s}.lg-ob:nth-child(3){animation-delay:1.35s}
.lg-obras__sig{animation:lg-llega .7s cubic-bezier(.16,1,.3,1) 1.5s both}

@media (prefers-reduced-motion:reduce){
  .lg-hero__foto.is-entrando,.lg-linea>span,.lg-hero__titulo.is-entrando .lg-linea>span,.lg-btn,.lg-hero__texto .lg-accion,.lg-ob,.lg-obras__sig{animation:lg-aparece .4s ease both}
  .lg-hero__texto .lg-accion svg path{animation:none;stroke-dashoffset:0}
  .lg-hero .lg-hero__titulo.is-saliendo .lg-linea>span{animation:none;opacity:0}
}

/* ===== Bosquejo antes de la foto (Impeccable animate; animación aprobada de la sección 2) =====
   El croquis de la obra se dibuja sobre papel cálido por capas: construcción → cimientos → estructura →
   cubierta → muros → detalles (.9s por trazo, cubic-bezier(.45,0,.25,1), escalonado .025s). Al terminar el
   papel se retira y la foto aparece con un fundido, en color. Mientras dura el papel, el
   texto se lee en carbón, el logo se oscurece, el botón del header pasa a su versión clara y los velos se apagan. */
.lg-hero__croquis{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,36px);padding:110px max(var(--lg-margen),16px) 20vh;background:var(--lg-hueso);transition:opacity 1.1s ease}
.lg-hero__dibujo{display:block;width:100%;height:auto;max-height:42svh}
.lg-hero__previa{margin:0;font-size:clamp(48px,6vw,96px);font-weight:300;line-height:1;letter-spacing:-.035em;color:var(--lg-tinta);animation:lg-sube .7s cubic-bezier(.16,1,.3,1) .7s both}
.lg-hero__croquis.is-fuera{display:none}
/* View Transition: la frase previa viaja desde bajo el dibujo hasta el título y se transforma en la frase final */
/* solo viaja la frase: la página no se fotografía (sin fundido cruzado de toda la página, sin destello) */
html.lg-vt-frase{view-transition-name:none}
::view-transition-group(lg-frase){animation-duration:1.05s;animation-timing-function:cubic-bezier(.45,0,.25,1)}
::view-transition-old(lg-frase),::view-transition-new(lg-frase){animation-duration:1.05s;height:100%;object-fit:none;object-position:left top}
/* el título llegó viajando con la View Transition: no repite su entrada (is-vt queda puesta; los cambios de obra la superan en especificidad) */
.lg-hero.is-vt .lg-linea>span{animation:none}
.lg-hero__dibujo .nota,.lg-hero__dibujo .sil{display:none}
.lg-hero__dibujo path{stroke-dasharray:1;stroke-dashoffset:1}
.lg-hero__croquis.go .lg-hero__dibujo path{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.45,0,.25,1)}
.lg-hero__croquis.is-ido{opacity:0;pointer-events:none}
/* la foto ya está debajo del papel: el papel con el dibujo se funde y la deja ver (un solo fundido, sin pasar por blanco) */
.lg-hero__croquis.is-ido{transition:opacity 1.2s ease}
.lg-hero__croquis.sin-previa .lg-hero__previa{visibility:hidden}
.lg-hero__titulo,.lg-hero__texto{transition:color .9s ease}
/* el texto, el botón y las placas esperan en pausa mientras se dibuja; entran cuando llega la foto */
.lg-hero.is-papel .lg-hero__titulo .lg-linea>span,.lg-hero.is-papel .lg-accion,.lg-hero.is-papel .lg-accion svg path,.lg-hero.is-papel .lg-ob,.lg-hero.is-papel .lg-obras__sig{animation-play-state:paused}
.lg-hero::after{transition:opacity .6s ease}
.lg-hero.is-papel::after{opacity:0}
html.lg-fase-papel .lg-head__logo{filter:brightness(.18);transition:filter .9s ease}
.lg-head__logo{transition:filter .9s ease}
@media (max-width:820px){.lg-hero__croquis{padding:100px 16px 30vh}.lg-hero__previa{font-size:46px;line-height:1.02}}
@media (prefers-reduced-motion:reduce){.lg-hero__croquis{display:none}lg-hero.is-papel .lg-hero__titulo{color:inherit}.lg-hero.is-papel::after{opacity:1}}