/* Header de Lugares — elementos de la referencia (buildcover):
   sin barra; logo grande que se queda con el hero; botón fijo translúcido (radio 10px → píldora al pasar el mouse);
   el índice se abre en el mismo marco: el header queda encima y el mismo botón cierra. */

.lg-head{position:absolute;inset:0 0 auto;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:calc(30px + env(safe-area-inset-top,0px)) max(var(--lg-margen),env(safe-area-inset-right,0px)) 0 max(var(--lg-margen),env(safe-area-inset-left,0px));pointer-events:none}
/* Velo bajo el header: degradado oscuro que sostiene el logo blanco sobre cualquier foto (portada, interior de obra).
   Solo sobre fondos oscuros (sin .is-light) y nunca con el índice abierto; entra y sale fundido. */
.lg-head::before{content:"";position:absolute;inset:0 0 auto;z-index:-1;height:clamp(170px,28svh,250px);pointer-events:none;background:linear-gradient(180deg,rgba(var(--lg-velo),.6) 0%,rgba(var(--lg-velo),.3) 45%,rgba(var(--lg-velo),0) 100%);transition:opacity .6s ease}
.lg-head.is-light::before,.idx-open .lg-head::before{opacity:0}
.lg-head__logo{position:relative;display:block;height:52px;aspect-ratio:2067/449;pointer-events:auto}
.lg-logo{position:absolute;inset:0;width:100%;height:100%}
.lg-logo--rojo{display:none}
.lg-logo{overflow:visible}

/* Logo que se dibuja como un arquitecto (solo la versión blanca sobre el hero; la roja del menú queda dibujada).
   Orden: suelo, cuatro arcos de afuera hacia adentro, figura, LUGARES (sube desde una máscara), ARQUITECTURA. Total 1,85 s.
   Estado por defecto = logo completo; los keyframes con fill-mode both lo ocultan solo mientras corre. */
@keyframes lg-dibuja{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
@keyframes lg-figura{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
@keyframes lg-rotulo{from{clip-path:inset(100% 0 0 0);transform:translateY(34%)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes lg-logo-aparece{from{opacity:0}to{opacity:1}}
.lg-logo--blanco .lg-trazo{stroke-dasharray:1 2;animation:lg-dibuja .4s var(--lg-ease-croquis) both}
.lg-logo--blanco .lg-trazo--suelo{animation-duration:.45s;animation-delay:.1s}
.lg-logo--blanco .lg-trazo--a1{animation-delay:.3s}
.lg-logo--blanco .lg-trazo--a2{animation-delay:.42s}
.lg-logo--blanco .lg-trazo--a3{animation-delay:.54s}
.lg-logo--blanco .lg-trazo--a4{animation-delay:.66s}
.lg-logo--blanco .lg-figura{transform-box:fill-box;animation:lg-figura .45s var(--lg-ease-croquis) 1s both}
.lg-logo--blanco .lg-lugares{transform-box:fill-box;animation:lg-rotulo .5s var(--lg-ease-croquis) 1.2s both}
.lg-logo--blanco .lg-arquitectura{animation:lg-logo-aparece .4s ease 1.45s both}
@media (prefers-reduced-motion:reduce){
  .lg-logo--blanco .lg-trazo,.lg-logo--blanco .lg-figura,.lg-logo--blanco .lg-lugares,.lg-logo--blanco .lg-arquitectura{animation:none}
  .lg-logo--blanco{animation:lg-logo-aparece .35s ease both}
}

/* Botón */
.lg-btn{position:fixed;top:calc(30px + env(safe-area-inset-top,0px));right:max(var(--lg-margen),env(safe-area-inset-right,0px));pointer-events:auto;display:flex;align-items:center;gap:10px;height:52px;padding:0 1.4em 0 1.15em;border:0;border-radius:10px;cursor:pointer;background:rgba(var(--lg-velo),.3);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);color:var(--lg-papel);transition:background-color .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1),border-radius .3s cubic-bezier(.16,1,.3,1),width .3s cubic-bezier(.16,1,.3,1),transform .15s ease}
.lg-btn__tx{font-size:16px;font-weight:500;white-space:nowrap}
.lg-btn__ic{width:24px;height:24px;flex:0 0 auto}
.lg-btn__ic path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.lg-btn__ic.draw path{transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
.lg-btn__ic.draw path:nth-child(2){transition-delay:.15s}.lg-btn__ic.draw path:nth-child(3){transition-delay:.3s}.lg-btn__ic.draw path:nth-child(4){transition-delay:.45s}.lg-btn__ic.draw path:nth-child(n+5){transition-delay:.6s}
.lg-btn__ic.shown path{stroke-dashoffset:0}
.lg-btn__ic.fade{opacity:0;transition:opacity .25s ease}
.lg-btn:hover{background:var(--lg-superficie);border-radius:50px;color:var(--lg-tinta)}
.lg-btn:active{transform:scale(.985)}
.lg-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Sobre fondos claros */
.lg-head.is-light .lg-btn{background:var(--lg-tinta);color:var(--lg-papel)}
.lg-head.is-light .lg-btn:hover{background:var(--lg-superficie);color:var(--lg-tinta);border-radius:50px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lg-btn{background:rgba(var(--lg-velo),.8)}.lg-head.is-light .lg-btn{background:var(--lg-superficie)}}

/* Menú — elementos de la referencia (buildcover): velo oscuro translúcido con desenfoque sobre la página,
   secciones en tipo muy grande alineadas abajo a la izquierda, la última separada, pie pequeño.
   Propio de Lugares: al pasar el mouse se dibuja bajo la sección una línea de tinta (animación del croquis). */
html.idx-open{overflow:hidden;padding-right:var(--lg-sbw,0px)}
html.idx-open .lg-head{position:fixed}
.lg-btn[aria-expanded="true"],.lg-head.is-light .lg-btn[aria-expanded="true"]{background:var(--lg-papel);color:var(--lg-tinta);border-radius:50px}

.lg-menu{position:fixed;inset:0;z-index:50;color:var(--lg-papel);overflow:auto;overscroll-behavior:none;transition:opacity .3s ease;background:rgba(var(--lg-velo),.93);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}
/* fondo del menú: carbón cálido al 93 % con desenfoque de 40px, para que se intuya el color del fondo sin que se lean sus textos */
.lg-menu.is-entering,.lg-menu.is-leaving{opacity:0}
.lg-menu__in{display:flex;flex-direction:column;min-height:100%;padding:calc(130px + env(safe-area-inset-top,0px)) max(var(--lg-margen),env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) max(var(--lg-margen),env(safe-area-inset-left,0px))}
.lg-menu__lista{list-style:none;margin:auto 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:.32em;font-size:clamp(34px,calc(6.2vw - 10px),78px);font-weight:400;line-height:1;letter-spacing:-.03em;text-wrap:pretty}
.lg-menu__lista a{position:relative;display:inline-block;padding-bottom:.12em;text-decoration:none;transition:opacity .25s ease}
.lg-menu__lista:has(a:hover) a:not(:hover),.lg-menu__lista:has(a:focus-visible) a:not(:focus-visible){opacity:.45}
.lg-menu__trazo{position:absolute;left:-.04em;right:-.04em;bottom:0;width:calc(100% + .08em);height:.14em;overflow:visible}
.lg-menu__trazo path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .9s var(--lg-ease-croquis),opacity .2s ease}
.lg-menu__lista a:hover .lg-menu__trazo path,.lg-menu__lista a:focus-visible .lg-menu__trazo path{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset .9s var(--lg-ease-croquis),opacity 0s}
.lg-menu__lista a:focus-visible{outline:2px solid var(--lg-papel);outline-offset:6px}
.lg-menu__pie{margin:0;padding-top:48px;font-size:16px;line-height:1.3;opacity:.8}

@media (max-width:640px){.lg-menu__in{padding-top:calc(100px + env(safe-area-inset-top,0px))}.lg-menu__pie{padding-top:32px}}
@media (max-width:640px){
  .lg-head{padding-top:calc(28px + env(safe-area-inset-top,0px))}
  .lg-head__logo{height:36px}
  .lg-btn{top:calc(24px + env(safe-area-inset-top,0px));height:44px;padding:0 .9em 0 .75em;gap:8px}
  .lg-btn__tx{font-size:14px}
  .lg-btn__ic{width:20px;height:20px}
}
@media (max-width:379px){
  .lg-btn{width:44px;padding:0;justify-content:center}
  .lg-btn__tx{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .lg-btn,.lg-btn__ic.draw path,.lg-menu,.lg-menu__lista a,.lg-menu__trazo path{animation:none;transition:none!important}
  .lg-btn__ic path{stroke-dashoffset:0}
}

/* con el menú abierto el logo queda siempre en papel claro (también durante el bosquejo) */
html.idx-open .lg-head__logo{filter:none!important}
html.idx-open .lg-logo--rojo{display:none!important}
html.idx-open .lg-logo--blanco{display:block!important}

/* Feedback animado (Impeccable animate): el texto del botón se funde al cambiar ("Encuentra tu lugar" ↔ "Cerrar")
   mientras el ancho se anima por script; nada cambia de golpe */
.lg-btn__tx{transition:opacity .14s ease}
.lg-btn.is-cambiando .lg-btn__tx{opacity:0}
.lg-btn__ic{transition:opacity .14s ease}
@media (prefers-reduced-motion:reduce){.lg-btn,.lg-btn__tx,.lg-btn__ic{transition:none}}