/* Secciones de la portada bajo el hero — heredan el sistema (DESIGN.md): papel cálido, carbón, Archivo, 1200 px. */

/* Conócenos: la cita de Diego a gran escala (lectura de declaración, como la segunda sección de la referencia)
   y la bajada que la explica, desplazada a la derecha en la grilla. */
.lg-conocenos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;row-gap:clamp(40px,5vw,72px);padding:clamp(72px,8vw,128px) max(var(--lg-margen),env(safe-area-inset-right,0px)) clamp(72px,8vw,128px) max(var(--lg-margen),env(safe-area-inset-left,0px));background:var(--lg-papel);color:var(--lg-tinta)}
.lg-conocenos__cita{grid-column:1/11;margin:0}
.lg-conocenos__cita p{margin:0;font-size:clamp(30px,3.4vw,52px);font-weight:400;line-height:1.14;letter-spacing:-.025em;text-wrap:balance}
.lg-conocenos__bajada{grid-column:7/12;margin:0;font-size:clamp(18px,1.3vw,20px);line-height:1.55;color:var(--lg-tinta)}
.lg-conocenos__bajada p{margin:0}
/* qué, cómo y por qué: los tres puntos de "Por qué Lugares", bajo la bajada */
.lg-conocenos__puntos{margin:28px 0 0;padding:24px 0 0;border-top:1.5px solid var(--lg-tinta);list-style:none;display:grid;gap:14px}
.lg-conocenos__puntos b{font-weight:600}
@media (max-width:820px){.lg-conocenos__cita,.lg-conocenos__bajada{grid-column:1/-1}}

/* Bosquejo de obra (mismo estilo, trazo y duración que todos: 3 s por capas C→L5; notas al final) */
.lg-conocenos__croquis{grid-column:1/-1;margin:0}
.lg-bosquejo__svg{display:block;width:100%;height:auto;pointer-events:none}
.lg-bosquejo .sil{display:none}
.lg-bosquejo .nota{opacity:0;transition:opacity .8s ease}
.lg-bosquejo.go .nota{opacity:1;transition-delay:3.1s}
.lg-bosquejo.js-bosquejo path{stroke-dasharray:1;stroke-dashoffset:1}
.lg-bosquejo.js-bosquejo.go path{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.45,0,.25,1)}
@media (prefers-reduced-motion:reduce){.lg-bosquejo.js-bosquejo path{stroke-dashoffset:0;transition:none}.lg-bosquejo .nota{opacity:1}}

/* Frase destacada con una línea dibujada a mano (Impeccable animate): trazo con temblor y doble pasada, como el croquis,
   en óxido; se traza de izquierda a derecha, renglón por renglón, cuando la cita ya apareció. */
.lg-subraya{--lg-trazo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8.6 C 40 7.2, 80 9.8, 130 8.1 S 220 6.9, 270 8.4 S 360 9.6, 398 7.4' fill='none' stroke='%23A8321A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M6 10.4 C 60 9.6, 120 11.5, 190 10.2 S 320 9.4, 394 10.8' fill='none' stroke='%23A8321A' stroke-width='1.1' stroke-linecap='round' stroke-opacity='.55'/%3E%3C/svg%3E");background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8.6 C 40 7.2, 80 9.8, 130 8.1 S 220 6.9, 270 8.4 S 360 9.6, 398 7.4' fill='none' stroke='%23A8321A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M6 10.4 C 60 9.6, 120 11.5, 190 10.2 S 320 9.4, 394 10.8' fill='none' stroke='%23A8321A' stroke-width='1.1' stroke-linecap='round' stroke-opacity='.55'/%3E%3C/svg%3E") no-repeat left 100% / 100% .32em;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:inherit;padding-bottom:.12em}
/* con JS, la frase se parte en renglones (.lg-renglon) y cada uno se traza cuando termina el anterior */
.lg-subraya.is-partida{background:none;padding-bottom:0}
.lg-renglon{background:inherit;background-image:var(--lg-trazo);background-repeat:no-repeat;background-position:left 100%;background-size:100% .32em;padding-bottom:.12em}
.lg-rev .lg-renglon{background-size:0% .32em}
.lg-rev.en-vista .lg-renglon{background-size:100% .32em;transition:background-size var(--dur,.9s) cubic-bezier(.45,0,.25,1) var(--ini,.9s)}
@media (prefers-reduced-motion:reduce){.lg-rev .lg-renglon,.lg-rev.en-vista .lg-renglon{background-size:100% .32em;transition:none}}

/* Entrada al llegar a la sección (Impeccable animate, mismo vocabulario del hero: subir desde una máscara).
   Solo con JS (clase .lg-rev la pone el script): sin JS todo queda visible. */
.lg-rev{opacity:0;transform:translateY(28px);clip-path:inset(0 0 100% 0)}
.lg-rev.en-vista{opacity:1;transform:none;clip-path:inset(0 0 0 0);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1),clip-path 1s cubic-bezier(.65,0,.25,1)}
.lg-rev.en-vista+.lg-rev.en-vista{transition-delay:.15s}
@media (prefers-reduced-motion:reduce){.lg-rev{transform:none;clip-path:none}.lg-rev.en-vista{transition:opacity .4s ease}}

/* Croquis → obra construida: el croquis se presiona y abre un visor con la foto real */
.lg-bosquejo__abrir{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:left}
.lg-bosquejo__ver{position:absolute;right:0;bottom:4%;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 1.2em;border-radius:10px;background:var(--lg-tinta);color:var(--lg-papel);font-size:15px;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .5s ease 3.4s,transform .5s cubic-bezier(.16,1,.3,1) 3.4s,border-radius .25s ease,background-color .25s ease}
.lg-bosquejo.go .lg-bosquejo__ver,.lg-bosquejo:not(.js-bosquejo) .lg-bosquejo__ver{opacity:1;transform:none}
.lg-bosquejo__ver svg{width:18px;height:12px}
.lg-bosquejo__ver path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lg-bosquejo__abrir:hover .lg-bosquejo__ver,.lg-bosquejo__abrir:focus-visible .lg-bosquejo__ver{background:var(--lg-oxido);border-radius:50px;transition-delay:0s}
.lg-bosquejo__abrir:focus-visible{outline:2px solid var(--lg-tinta);outline-offset:6px}
.lg-visor__fig{margin:0}
.lg-visor__fig img{display:block;width:100%;height:auto;max-height:calc(100svh - 140px);object-fit:contain;border-radius:14px}
.lg-visor__fig figcaption{margin-top:16px;font-size:16px}
.lg-visor__fig figcaption b{font-weight:600}
.lg-visor__cerrar{position:absolute;top:-56px;right:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 1.1em 0 .9em;border:0;border-radius:50px;background:var(--lg-papel);color:var(--lg-tinta);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.lg-visor__cerrar:hover{background:var(--lg-tinta);color:var(--lg-papel)}
.lg-visor__cerrar svg{width:20px;height:20px}
.lg-visor__cerrar path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lg-visor__cerrar:focus-visible{outline:2px solid var(--lg-papel);outline-offset:3px}
@media (max-width:640px){.lg-bosquejo__ver{height:40px;font-size:14px;bottom:0}}
@media (prefers-reduced-motion:reduce){.lg-bosquejo__ver{transition:none}}


/* Pop-up de imágenes (base para todas): un fundido para todo el conjunto y el fondo carbón con él. */
.lg-visor{width:min(1200px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);padding:0;border:0;background:transparent;color:var(--lg-papel);overflow:visible;opacity:0;transition:opacity .3s ease,overlay .3s allow-discrete,display .3s allow-discrete}
.lg-visor[open]{opacity:1}
@starting-style{.lg-visor[open]{opacity:0}}
.lg-visor::backdrop{background:rgba(var(--lg-velo),.8);opacity:0;transition:opacity .3s ease,overlay .3s allow-discrete,display .3s allow-discrete}
.lg-visor[open]::backdrop{opacity:1}
@starting-style{.lg-visor[open]::backdrop{opacity:0}}
.lg-visor[open].is-cerrando,.lg-visor[open].is-cerrando::backdrop{opacity:0}

/* Bajada de Conócenos: entra cuando el croquis termina de dibujarse (cita → croquis → bajada) */
.lg-conocenos__bajada.lg-tras{opacity:0;transform:translateY(24px);clip-path:inset(0 0 100% 0)}
.lg-conocenos__bajada.lg-tras.en-vista{opacity:1;transform:none;clip-path:inset(0 0 0 0);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1),clip-path 1.1s cubic-bezier(.65,0,.25,1)}
@media (prefers-reduced-motion:reduce){.lg-conocenos__bajada.lg-tras{transform:none;clip-path:none}.lg-conocenos__bajada.lg-tras.en-vista{transition:opacity .4s ease}}


/* ===== Obras a lo largo de Chile =====
   Título + croquis de Chile fijos a la izquierda (5/12); las obras pasan a la derecha (7/12).
   La obra que cruza el centro de la pantalla enciende su punto y su nombre bajo el título. */
.lg-obras-sec{position:relative;overflow:clip;background-color:var(--lg-musgo-tenue);color:var(--lg-tinta)}
/* mesh tenue de la paleta (Impeccable colorize), FIJO como fondo: una capa del alto de la pantalla que se queda quieta
   (sticky) mientras el contenido pasa por encima; funciona igual en todos los navegadores, también en iOS */
.lg-obras-sec::before{content:"";position:sticky;top:0;display:block;height:100svh;margin-bottom:-100svh;pointer-events:none;
  background-image:radial-gradient(ellipse 48% 60% at 10% 18%,color-mix(in srgb,var(--lg-musgo-claro) 26%,transparent),transparent 72%),
    radial-gradient(ellipse 44% 56% at 92% 30%,color-mix(in srgb,var(--lg-arcilla) 30%,transparent),transparent 72%),
    radial-gradient(ellipse 52% 50% at 48% 62%,color-mix(in srgb,var(--lg-papel) 80%,transparent),transparent 74%),
    radial-gradient(ellipse 42% 54% at 84% 92%,color-mix(in srgb,var(--lg-musgo-claro) 20%,transparent),transparent 72%),
    radial-gradient(ellipse 40% 50% at 14% 88%,color-mix(in srgb,var(--lg-arcilla) 22%,transparent),transparent 72%);
  background-size:100% 100%;background-repeat:no-repeat}
.lg-obras-sec__in{position:relative;z-index:1;padding:0 max(var(--lg-margen),env(safe-area-inset-right,0px)) 0 max(var(--lg-margen),env(safe-area-inset-left,0px))}
.lg-obras-sec__in{box-sizing:border-box;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:start}
.lg-obras-sec__fijo{grid-column:1/6;position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(20px,3vh,36px);padding-block:clamp(80px,9vh,104px) clamp(24px,4vh,48px)}
.lg-obras-sec__tit{margin:0;font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:300;text-wrap:balance}
.lg-obras-sec__tit span,.lg-obras-sec__tit b{display:block}
.lg-obras-sec__tit b{font-weight:600}
.lg-mapa{position:relative;min-height:0;height:100%;aspect-ratio:1/3;justify-self:start;margin-left:-4%}
.lg-mapa__svg,.lg-mapa__puntos{position:absolute;inset:0;display:block;width:100%;height:100%}
/* el croquis se traza al llegar: líneas de construcción → contorno de norte a sur → achurado → puntos (3 s, reloj de los croquis) */
.lg-mapa.js-mapa .m-cons path{stroke-dasharray:1;stroke-dashoffset:1}
.lg-mapa.js-mapa .m-out{clip-path:inset(0 0 100% 0)}
.lg-mapa.js-mapa .m-fill{opacity:0;clip-path:inset(0 0 100% 0)}
.lg-mapa.js-mapa .lg-mapa__puntos{opacity:0}
.lg-mapa.go .m-cons path{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.45,0,.25,1)}
.lg-mapa.go .m-out{clip-path:inset(0 0 0 0);transition:clip-path 2.2s cubic-bezier(.45,0,.25,1) .35s}
.lg-mapa.go .m-fill{opacity:1;clip-path:inset(0 0 0 0);transition:clip-path 2.2s cubic-bezier(.45,0,.25,1) .7s,opacity .8s ease .7s}
.lg-mapa.go .lg-mapa__puntos{opacity:1;transition:opacity .6s ease 2.7s}
.lg-mapa.js-mapa:not(.listo) .lg-mapa__vineta{visibility:hidden}
.lg-punto{cursor:pointer}
.lg-punto circle{transition:r .35s cubic-bezier(.16,1,.3,1),fill .25s ease,opacity .25s ease}
/* puntos: inactivos en musgo, el activo en óxido (rojo de acción), más grande y con halo marcado; tamaño fijado desde la escala del mapa (--k) */
.lg-punto .c{r:calc(5px / var(--k,.4));fill:var(--lg-musgo);transition:r .35s cubic-bezier(.16,1,.3,1),fill .25s ease}
.lg-punto .t{r:calc(16px / var(--k,.4));fill:var(--lg-oxido);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.lg-punto.is-on .c{r:calc(8px / var(--k,.4));fill:var(--lg-oxido)}
.lg-punto.is-on .t{opacity:.38;transform:none}

.lg-punto:hover .c{fill:var(--lg-oxido)}
/* viñeta: rótulo con la comuna que viaja de punto en punto. Al llegar, la línea guía sale del punto hacia la derecha
   y después el rótulo se descubre de izquierda a derecha, con el mismo efecto de lámina de las fotos de las tarjetas */
.lg-mapa__vineta{position:absolute;left:0;top:0;display:flex;align-items:center;pointer-events:none;transform:translate(var(--x,0px),var(--y,0px));transition:transform .3s cubic-bezier(.16,1,.3,1);visibility:hidden;z-index:2}
.lg-mapa__vineta.is-on{visibility:visible}
.lg-mapa__vineta.al-lado{flex-direction:row-reverse}
.lg-mapa__guia{display:block;width:var(--guia,30px);height:1.5px;margin:0 6px 0 0;background:var(--lg-oxido);transform-origin:left center;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.lg-mapa__vineta.al-lado .lg-mapa__guia{margin:0 0 0 6px;transform-origin:right center}
.lg-mapa__vineta.is-moviendo .lg-mapa__guia{transform:scaleX(0);transition:transform .12s ease}
.lg-mapa__rotulo{display:grid;gap:1px;padding:8px 12px 9px;border-radius:10px;background:var(--lg-oxido);color:var(--lg-papel);white-space:nowrap;clip-path:inset(0 0 0 0 round 10px);transition:clip-path .4s cubic-bezier(.65,0,.25,1) .14s}
.lg-mapa__vineta.is-moviendo .lg-mapa__rotulo{clip-path:inset(0 100% 0 0 round 10px);transition:clip-path .12s ease}
.lg-mapa__rotulo b{font-size:15px;font-weight:600;line-height:1.2}
.lg-mapa__rotulo span{font-size:13px;line-height:1.3;color:color-mix(in srgb,var(--lg-papel) 84%,var(--lg-oxido))}
.lg-mapa__rotulo span:empty{display:none}
/* obras */
.lg-obras-sec__lista{grid-column:7/13;list-style:none;margin:0;padding:clamp(120px,22vh,240px) 0 clamp(120px,24vh,260px);display:grid;gap:clamp(56px,7vw,96px)}
.lg-obra__enlace{display:grid;gap:18px;color:inherit;text-decoration:none}
.lg-obra__foto{display:block;overflow:hidden;border-radius:14px;aspect-ratio:3/2;background:var(--lg-papel)}
.lg-obra__foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.lg-obra__enlace:hover .lg-obra__foto img{transform:scale(1.025)}
.lg-obra__pie{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.lg-obra__datos{display:grid;gap:6px;min-width:0}
.lg-obra__nombre{font-size:clamp(24px,2.2vw,32px);font-weight:600;line-height:1.08;letter-spacing:-.02em}
.lg-obra__meta{font-size:16px;color:var(--lg-suave)}
.lg-obra__ver{flex:none;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:10px;background:var(--lg-papel);color:var(--lg-tinta);font-size:15px;font-weight:600;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)}
.lg-obra__ver svg{width:18px;height:12px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.lg-obra__ver path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lg-obra__enlace:hover .lg-obra__ver{background:var(--lg-oxido);color:var(--lg-papel);border-radius:50px}
.lg-obra__enlace:hover .lg-obra__ver svg{transform:translateX(3px)}
.lg-obra__enlace{border-radius:18px}
.lg-obra__enlace:focus-visible{outline:2px solid var(--lg-tinta);outline-offset:6px}
.lg-obra__enlace:focus-visible .lg-obra__ver{background:var(--lg-oxido);color:var(--lg-papel);border-radius:50px}
/* entrada (Impeccable animate): la foto se descubre de izquierda a derecha, como una lámina que se desliza, y la imagen
   se asienta (escala 1,06 → 1) mientras se abre; luego sube el pie */
.lg-obra.js-obra .lg-obra__foto{clip-path:inset(0 100% 0 0 round 14px)}
.lg-obra.js-obra .lg-obra__foto img{transform:scale(1.06)}
.lg-obra.js-obra.en-vista .lg-obra__foto img{transform:none;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.lg-obra.js-obra.en-vista .lg-obra__enlace:hover .lg-obra__foto img{transform:scale(1.025);transition-duration:.9s}
.lg-obra.js-obra .lg-obra__pie{opacity:0;transform:translateY(16px)}
.lg-obra.js-obra.en-vista .lg-obra__foto{clip-path:inset(0 0 0 0 round 14px);transition:clip-path 1.1s cubic-bezier(.65,0,.25,1)}
.lg-riel .lg-obra.js-obra .lg-obra__pie{transform:none}
.lg-obra.js-obra.en-vista .lg-obra__pie{opacity:1;transform:none;transition:opacity .6s ease .45s,transform .8s cubic-bezier(.16,1,.3,1) .45s}
@media (max-width:900px){
  .lg-obras-sec__in{display:block}
  .lg-obras-sec__fijo{position:relative;height:auto;grid-template-rows:auto auto;padding-block:clamp(88px,14vw,120px) 8px}
  .lg-mapa{height:58svh;max-height:none}
  .lg-obras-sec__lista{padding:56px 0 110px;gap:56px}
}
@media (prefers-reduced-motion:reduce){
  .lg-mapa.js-mapa .m-cons path{stroke-dashoffset:0}.lg-mapa.js-mapa .m-out,.lg-mapa.js-mapa .m-fill{clip-path:none;opacity:1}.lg-mapa.js-mapa .lg-mapa__puntos{opacity:1}
  .lg-obra.js-obra .lg-obra__foto{clip-path:none}.lg-obra.js-obra .lg-obra__foto img{transform:none}.lg-obra.js-obra .lg-obra__pie{opacity:1;transform:none}
  .lg-obra__foto img,.lg-obra__ver,.lg-obra__ver svg,.lg-punto circle,.lg-mapa__vineta,.lg-mapa__guia,.lg-mapa__rotulo{transition:none}
}

/* ===== Recorrido por la Casa Yami =====
   Módulo de ambientes como el de buildcover: foto grande a casi todo el ancho, selector de vidrio arriba,
   leyenda y enlace abajo; las fotos se funden entre sí. */
.lg-recorrido{position:relative;z-index:1;background:var(--lg-papel);color:var(--lg-tinta)}
.lg-recorrido__in{box-sizing:border-box;margin-inline:auto;padding:clamp(96px,11vw,160px) max(var(--lg-margen),env(safe-area-inset-right,0px)) 0 max(var(--lg-margen),env(safe-area-inset-left,0px))}
.lg-recorrido__ancho{box-sizing:border-box;padding:0 max(clamp(16px,4vw,60px),env(safe-area-inset-right,0px)) clamp(96px,11vw,160px) max(clamp(16px,4vw,60px),env(safe-area-inset-left,0px))}
.lg-recorrido__cab{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,56px)}
.lg-recorrido__epi{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--lg-suave)}
.lg-recorrido__tit{margin:0;font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:300;text-wrap:balance}
.lg-recorrido__tit b{font-weight:600}
.lg-recorrido__visor{position:relative}
.lg-recorrido__fotos{touch-action:pan-y;position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100svh - 32px);border-radius:20px;overflow:hidden;background:var(--lg-papel-2)}
.lg-recorrido__foto{position:absolute;inset:0;margin:0;opacity:0;z-index:1;transition:opacity .5s ease .2s}
.lg-recorrido__foto img{width:100%;height:100%;object-fit:cover;display:block}
.lg-recorrido__foto.is-on{opacity:1;z-index:2;transition-delay:0s}
.lg-recorrido__tags{position:absolute;top:0;left:0;width:100%;box-sizing:border-box;display:flex;justify-content:center;padding:clamp(16px,2.5vw,32px);pointer-events:none;z-index:3}
.lg-recorrido__grupo{pointer-events:auto;display:flex;gap:4px;padding:6px;border-radius:999px;background:rgba(var(--lg-velo),.6);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px)}
.lg-recorrido__grupo button{height:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--lg-papel);font:inherit;font-size:15px;font-weight:500;opacity:.78;cursor:pointer;transition:opacity .25s ease,background-color .25s ease}
.lg-recorrido__grupo button:hover{opacity:1}
.lg-recorrido__grupo button[aria-pressed="true"]{opacity:1;background:color-mix(in srgb,var(--lg-papel) 16%,transparent)}
.lg-recorrido__grupo button:focus-visible{outline:2px solid var(--lg-papel);outline-offset:2px}
.lg-recorrido__barra{position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box;z-index:3;padding:clamp(16px,2.5vw,32px);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;pointer-events:none}
.lg-recorrido__barra>*{pointer-events:auto}
.lg-recorrido__ley{margin:0;padding:0;color:var(--lg-papel);font-size:clamp(17px,1.35vw,20px);font-weight:600;line-height:1.3;letter-spacing:-.01em;text-wrap:pretty;max-width:min(60ch,58%);transition:opacity .25s ease,visibility 0s 0s,color .25s ease}
.lg-recorrido__ley b{font-weight:600}
.lg-recorrido__ley.is-cambiando{opacity:0}
/* Degradados bajo la leyenda y bajo las etiquetas (mismos tonos que las fotos de Diego); sin placa de vidrio */
.lg-recorrido__fotos::before,.lg-recorrido__fotos::after{content:"";position:absolute;left:0;right:0;z-index:3;pointer-events:none;opacity:1;transition:opacity .5s ease}
.lg-recorrido__fotos::after{bottom:0;height:65%;background:linear-gradient(0deg,rgba(var(--lg-velo),.84) 0%,rgba(var(--lg-velo),.68) 28%,rgba(var(--lg-velo),.3) 58%,rgba(var(--lg-velo),0) 85%)}
.lg-recorrido__fotos::before{top:0;height:22%;background:linear-gradient(180deg,rgba(var(--lg-velo),.45),rgba(var(--lg-velo),0))}
.lg-recorrido__cta{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 1.5em;border-radius:10px;background:var(--lg-papel);color:var(--lg-tinta);font-size:15px;font-weight:600;text-decoration:none;transition:background-color .25s ease,color .25s ease,border-radius .25s ease,transform .25s ease}
.lg-recorrido__cta svg{width:18px;height:12px}
.lg-recorrido__cta path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lg-recorrido__cta:hover{border-radius:50px}
.lg-recorrido__cta:active{transform:scale(.985)}
.lg-recorrido__cta:focus-visible{outline:2px solid var(--lg-papel);outline-offset:3px}
@media (max-width:640px){
  .lg-recorrido__fotos{aspect-ratio:.7;max-height:none}
  .lg-recorrido__grupo{flex-wrap:wrap;justify-content:center;overflow:visible;max-width:100%}
  .lg-recorrido__grupo button{height:40px;padding:0 10px;font-size:14px}
  .lg-recorrido__barra{flex-direction:column;align-items:stretch}
  .lg-recorrido__ley{max-width:100%}
  .lg-recorrido__cta{width:auto;align-self:flex-start;height:48px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lg-recorrido__grupo{background:rgba(var(--lg-velo),.8)}}
@media (prefers-reduced-motion:reduce){
  .lg-recorrido__foto,.lg-recorrido__foto.is-on,.lg-recorrido__grupo button,.lg-recorrido__ley,.lg-recorrido__cta{transition:none}
}

/* ===== Cómo trabajamos =====
   Cuatro etapas en un riel horizontal con línea de tiempo; arranca en la columna de 1200 px y sangra a la derecha. */
.lg-metodo{position:relative;background:var(--lg-hueso);color:var(--lg-tinta);padding-block:clamp(96px,11vw,160px);overflow:clip}
.lg-metodo__cab{box-sizing:border-box;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(36px,4vw,56px);padding:0 max(var(--lg-margen),env(safe-area-inset-right,0px)) 0 max(var(--lg-margen),env(safe-area-inset-left,0px))}
.lg-metodo__tit{margin:0;font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:300;text-wrap:balance}
.lg-metodo__tit span,.lg-metodo__tit b{display:inline}
.lg-metodo__tit b{font-weight:600}
.lg-metodo__ctrl{display:flex;gap:8px}
.lg-metodo__flecha{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border-radius:50%;border:1.5px solid var(--lg-tinta);background:transparent;color:var(--lg-tinta);cursor:pointer;transition:background-color .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1),opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1)}
.lg-metodo__flecha svg{width:18px;height:12px;display:block}
.lg-metodo__flecha path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lg-metodo__flecha--prev svg{transform:scaleX(-1)}
.lg-metodo__flecha:hover{background:var(--lg-tinta);color:var(--lg-papel)}
.lg-metodo__flecha:active{transform:scale(.94)}
.lg-metodo__flecha:focus-visible{outline:2px solid var(--lg-tinta);outline-offset:3px}
.lg-metodo__flecha[disabled]{opacity:.3;cursor:default}
.lg-metodo__flecha[disabled]:hover{background:transparent;color:var(--lg-tinta)}
.lg-metodo__flecha[disabled]:active{transform:none}
.lg-metodo__riel,.lg-riel{display:grid;grid-auto-flow:column;--gap:20px;grid-auto-columns:calc((100% + var(--lg-margen) - var(--gap) * 2) / 2.18);gap:var(--gap);list-style:none;margin:0;padding:0 max(var(--lg-margen),env(safe-area-inset-right,0px)) 8px max(var(--lg-margen),env(safe-area-inset-left,0px));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--lg-margen),env(safe-area-inset-left,0px));scrollbar-width:none;overscroll-behavior-x:contain;overflow-y:hidden;touch-action:pan-x pan-y}
.lg-metodo__riel>*,.lg-riel>*{scroll-snap-stop:always}
.lg-metodo__riel::-webkit-scrollbar,.lg-riel::-webkit-scrollbar{display:none}
.lg-metodo__riel:focus-visible,.lg-riel:focus-visible{outline:2px solid var(--lg-tinta);outline-offset:-2px}
.lg-metodo__etapa{scroll-snap-align:start;display:grid;gap:16px;align-content:start}
.lg-metodo__foto{margin:0;aspect-ratio:5/6;border-radius:14px;overflow:hidden;background:var(--lg-papel)}
/* última tarjeta: invitación a conversar, carbón con texto papel; mismo formato que las fotos */
.lg-metodo__contacto{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:clamp(24px,2.4vw,32px);background:var(--lg-tinta);color:var(--lg-papel);box-sizing:border-box}
.lg-metodo__pregunta{margin:0;font-size:clamp(28px,2.6vw,38px);font-weight:300;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.lg-metodo__invita{margin:auto 0 0;font-size:17px;line-height:1.5;color:color-mix(in srgb,var(--lg-papel) 82%,var(--lg-tinta));max-width:30ch}
.lg-metodo__escribe{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 1.4em;border-radius:10px;background:var(--lg-papel);color:var(--lg-tinta);font-size:15px;font-weight:600;text-decoration:none;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)}
.lg-metodo__escribe svg{width:18px;height:12px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.lg-metodo__escribe path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lg-metodo__escribe:hover,.lg-metodo__escribe:focus-visible{background:var(--lg-oxido);color:var(--lg-papel);border-radius:50px}
.lg-metodo__escribe:hover svg{transform:translateX(3px)}
.lg-metodo__escribe:focus-visible{outline:2px solid var(--lg-papel);outline-offset:3px}
.lg-metodo__escribe:active{transform:scale(.985)}
.lg-metodo__foto img{width:100%;height:100%;object-fit:cover;display:block}
.lg-metodo__nombre{margin:0;font-size:clamp(22px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.lg-metodo__texto{margin:0;font-size:17px;line-height:1.55;color:var(--lg-suave);max-width:34ch}
/* entrada: la línea de tiempo se traza etapa por etapa, la foto se descubre y luego llegan número, nombre y texto */
.js-metodo .lg-metodo__foto{clip-path:inset(0 100% 0 0 round 14px)}
.js-metodo .lg-metodo__foto img{transform:scale(1.06)}
.js-metodo.en-vista .lg-metodo__foto img{transform:none;transition:transform 1.4s cubic-bezier(.16,1,.3,1) calc(var(--i) * .18s + .1s)}
@media (hover:hover) and (pointer:fine){.lg-metodo__riel,.lg-riel{cursor:grab;user-select:none}}
.js-metodo .lg-metodo__num,.js-metodo .lg-metodo__marca::before,.js-metodo .lg-metodo__nombre,.js-metodo .lg-metodo__texto{opacity:0;transform:translateY(16px)}
.js-metodo.en-vista .lg-metodo__foto{clip-path:inset(0 0 0 0 round 14px);transition:clip-path 1.1s cubic-bezier(.65,0,.25,1) calc(var(--i) * .18s + .1s)}
.js-metodo.en-vista .lg-metodo__num,.js-metodo.en-vista .lg-metodo__marca::before,.js-metodo.en-vista .lg-metodo__nombre{opacity:1;transform:none;transition:opacity .6s ease calc(var(--i) * .18s + .45s),transform .6s cubic-bezier(.16,1,.3,1) calc(var(--i) * .18s + .45s)}
.js-metodo.en-vista .lg-metodo__texto{opacity:1;transform:none;transition:opacity .8s ease calc(var(--i) * .18s + .45s),transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i) * .18s + .45s)}
@media (max-width:640px){
  .lg-metodo__flecha{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .js-metodo .lg-metodo__marca::after{transform:none}
  .js-metodo .lg-metodo__foto{clip-path:none}.js-metodo .lg-metodo__foto img{transform:none;transition:none}
  .js-metodo .lg-metodo__num,.js-metodo .lg-metodo__marca::before,.js-metodo .lg-metodo__nombre,.js-metodo .lg-metodo__texto{opacity:1;transform:none}
  .js-metodo.en-vista .lg-metodo__marca::after,.js-metodo.en-vista .lg-metodo__foto,.js-metodo.en-vista .lg-metodo__num,.js-metodo.en-vista .lg-metodo__marca::before,.js-metodo.en-vista .lg-metodo__nombre,.js-metodo.en-vista .lg-metodo__texto{transition:none}
  .lg-metodo__flecha{transition:background-color .25s,color .25s,opacity .25s}
}

/* ===== Diego Vergara ===== */
.lg-diego{position:relative;background:var(--lg-papel);color:var(--lg-tinta)}
.lg-diego__fijo{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:1;mix-blend-mode:difference}
.lg-diego__tit{margin:0;font-size:clamp(56px,11vw,180px);line-height:.88;letter-spacing:-.035em;text-align:center;color:var(--lg-papel)} /* papel en modo diferencia: sobre el papel se ve negro y sobre las fotos invierte su color */
.lg-diego__tit span,.lg-diego__tit b{display:block}
.lg-diego__tit span{font-weight:300}
.lg-diego__tit b{font-weight:600}
.lg-diego__pasos{position:relative;z-index:0;box-sizing:border-box;list-style:none;margin:-8svh 0 0;padding:0 max(var(--lg-margen),env(safe-area-inset-right,0px)) 40svh max(var(--lg-margen),env(safe-area-inset-left,0px))}
.lg-diego__paso{--n:min(30vw,420px);--ease:cubic-bezier(.16,1,.3,1);position:relative;width:100%;margin-bottom:24svh;container-type:inline-size;pointer-events:none}
.lg-diego__foto,.lg-diego__puntos{pointer-events:auto}
/* la caja de cada foto mide siempre el ancho completo del contenedor; la ventana estrecha se logra con clip-path (no se anima ancho ni margen) */
.lg-diego__foto{margin:0;position:relative;height:calc(var(--n) * 1.25);border-radius:14px;overflow:hidden;background:var(--lg-papel-2);clip-path:inset(0 calc(100% - var(--n)) 0 0 round 14px)}
.lg-diego__paso:nth-child(even) .lg-diego__foto{clip-path:inset(0 0 0 calc(100% - var(--n)) round 14px)}
.lg-diego__pista{position:absolute;inset:0;transform:translateX(calc(var(--n) / 2 - 50cqw))}
.lg-diego__paso:nth-child(even) .lg-diego__pista{transform:translateX(calc(50cqw - var(--n) / 2))}
.lg-diego__foto::after{content:"";position:absolute;inset:0 0 auto 0;height:55%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(var(--lg-velo),.84) 0%,rgba(var(--lg-velo),.68) 28%,rgba(var(--lg-velo),.3) 58%,rgba(var(--lg-velo),0) 85%)}
.lg-diego__foto::before{content:"";position:absolute;inset:auto 0 0 0;height:22%;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(var(--lg-velo),.45),rgba(var(--lg-velo),0))}
.lg-diego__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0}
.lg-diego__img.is-on{opacity:1}
/* lámina: la foto que entra se descubre de izquierda a derecha sobre la saliente (misma curva que la foto de Obras) */
.lg-diego__img.is-entra{opacity:1;z-index:1}
.lg-diego__puntos{position:absolute;left:clamp(18px,1.8vw,26px);bottom:16px;z-index:3;display:flex;gap:6px}
.lg-diego__paso:nth-child(even) .lg-diego__puntos{translate:calc(100cqw - var(--n)) 0}
.lg-diego__punto{position:relative;width:28px;height:24px;padding:0;border:0;background:transparent;cursor:pointer}
.lg-diego__punto::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:color-mix(in srgb,var(--lg-papel) 45%,transparent);transition:background-color .25s}
.lg-diego__punto[aria-current="true"]::before{background:var(--lg-papel)}
.lg-diego__punto:focus-visible{outline:2px solid var(--lg-papel);outline-offset:2px}
/* acota el nombre fijo al tramo de las fotos */
.lg-diego__escena{position:relative}
/* la frase va dentro de la foto, arriba a la izquierda, en papel sin placa (referencia buildcover); un velo suave arriba asegura la lectura */
.lg-diego__frase{position:absolute;left:0;width:var(--n);top:0;z-index:3;margin:0;padding:clamp(18px,1.8vw,26px);color:var(--lg-papel);font-size:clamp(17px,1.35vw,20px);font-weight:600;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.lg-diego__paso:nth-child(even) .lg-diego__frase{translate:calc(100cqw - var(--n)) 0}
/* entrada: cada foto se descubre desde su borde de anclaje hasta su ancho estrecho */
.lg-diego__paso.js-diego .lg-diego__foto{clip-path:inset(0 100% 0 0 round 14px)}
.lg-diego__paso.js-diego:nth-child(even) .lg-diego__foto{clip-path:inset(0 0 0 100% round 14px)}
.lg-diego__paso.js-diego .lg-diego__foto img{transform:scale(1.06)}
.lg-diego__paso.js-diego .lg-diego__frase{opacity:0;transform:translateY(16px)}
.lg-diego__paso.js-diego.en-vista .lg-diego__foto{clip-path:inset(0 calc(100% - var(--n)) 0 0 round 14px);transition:clip-path 1.1s cubic-bezier(.65,0,.25,1)}
.lg-diego__paso.js-diego.en-vista:nth-child(even) .lg-diego__foto{clip-path:inset(0 0 0 calc(100% - var(--n)) round 14px)}
.lg-diego__paso.js-diego.en-vista .lg-diego__foto img{transform:none;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.lg-diego__paso.js-diego.en-vista .lg-diego__frase{opacity:1;transform:none;transition:opacity .6s ease .75s,transform .8s cubic-bezier(.16,1,.3,1) .75s}
/* ya revelada: cerrar es rápido (.6 s) */
.lg-diego__paso.js-diego.reveló .lg-diego__foto{transition:clip-path .6s var(--ease)}
.lg-diego__paso.js-diego.reveló .lg-diego__pista,.lg-diego__paso.js-diego.reveló .lg-diego__puntos{transition:transform .6s var(--ease),translate .6s var(--ease)}
.lg-diego__paso.js-diego.reveló .lg-diego__frase{transition:opacity .6s ease,transform .8s var(--ease),translate .6s var(--ease)}
/* abierta: la foto que cruza el centro se extiende por todo el ancho hacia su lado libre */
.lg-diego__paso.js-diego.en-vista.is-abierta .lg-diego__foto,.lg-diego__paso.js-diego.en-vista.is-abierta:nth-child(even) .lg-diego__foto{clip-path:inset(0 round 14px);transition:clip-path .9s var(--ease)}
.lg-diego__paso.js-diego.is-abierta .lg-diego__pista,.lg-diego__paso.js-diego.is-abierta:nth-child(even) .lg-diego__pista{transform:none;transition:transform .9s var(--ease)}
.lg-diego__paso.js-diego.is-abierta .lg-diego__puntos,.lg-diego__paso.js-diego.is-abierta:nth-child(even) .lg-diego__puntos,.lg-diego__paso.js-diego.is-abierta .lg-diego__frase,.lg-diego__paso.js-diego.is-abierta:nth-child(even) .lg-diego__frase{translate:0 0}
.lg-diego__paso.js-diego.is-abierta .lg-diego__puntos{transition:translate .9s var(--ease)}
.lg-diego__paso.js-diego.is-abierta .lg-diego__frase{transition:opacity .6s ease,transform .8s var(--ease),translate .9s var(--ease)}
@media (max-width:820px){
  .lg-diego__paso{--n:72cqw}
  .lg-diego__tit{font-size:21vw}
  }
@media (prefers-reduced-motion:reduce){
  .lg-diego__paso.js-diego .lg-diego__foto,.lg-diego__paso.js-diego:nth-child(even) .lg-diego__foto,.lg-diego__paso.js-diego.en-vista .lg-diego__foto,.lg-diego__paso.js-diego.en-vista:nth-child(even) .lg-diego__foto,.lg-diego__paso.js-diego.en-vista.is-abierta .lg-diego__foto,.lg-diego__paso.js-diego.en-vista.is-abierta:nth-child(even) .lg-diego__foto{transition:none}
  .lg-diego__paso.js-diego .lg-diego__foto{clip-path:inset(0 calc(100% - var(--n)) 0 0 round 14px)}
  .lg-diego__paso.js-diego:nth-child(even) .lg-diego__foto{clip-path:inset(0 0 0 calc(100% - var(--n)) round 14px)}
  .lg-diego__paso.js-diego.en-vista.is-abierta .lg-diego__foto{clip-path:inset(0 calc(100% - var(--n)) 0 0 round 14px)}
  .lg-diego__paso.js-diego.en-vista.is-abierta:nth-child(even) .lg-diego__foto{clip-path:inset(0 0 0 calc(100% - var(--n)) round 14px)}
  .lg-diego__paso.is-abierta .lg-diego__pista{transform:translateX(calc(var(--n) / 2 - 50cqw))}
  .lg-diego__paso.is-abierta:nth-child(even) .lg-diego__pista{transform:translateX(calc(50cqw - var(--n) / 2))}
  .lg-diego__paso.is-abierta:nth-child(even) .lg-diego__puntos,.lg-diego__paso.is-abierta:nth-child(even) .lg-diego__frase{translate:calc(100cqw - var(--n)) 0}
  .lg-diego__pista,.lg-diego__puntos,.lg-diego__frase{transition:none!important}
  .lg-diego__paso.js-diego .lg-diego__foto img{transform:none;transition:none}
  .lg-diego__paso.js-diego .lg-diego__frase{opacity:1;transform:none}
  .lg-diego__img,.lg-diego__punto::before{transition:none}
}

/* móvil: el nombre se lee completo antes de que pase la primera foto */
@media (max-width:820px){.lg-diego__pasos{margin-top:-4svh}}

/* Contacto: invitación, formulario y la palabra LUGARES hecha con las obras */
.lg-contacto{background:var(--lg-musgo-noche);color:var(--lg-papel);min-height:100svh;display:grid;grid-template-rows:1fr auto;padding-block:clamp(96px,11vw,160px) calc(24px + env(safe-area-inset-bottom,0px));color-scheme:dark}
.lg-contacto__in>*{min-width:0}
.lg-contacto__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;padding:0 max(var(--lg-margen),env(safe-area-inset-right,0px)) 0 max(var(--lg-margen),env(safe-area-inset-left,0px))}
.lg-contacto__logo{grid-column:1/-1}
.lg-contacto__cta{grid-column:1/7;align-self:center}
.lg-contacto__form{display:grid;gap:16px;transition:opacity .3s ease;color-scheme:dark}
.lg-contacto__logo{display:block;width:clamp(170px,15vw,230px);margin-bottom:clamp(28px,3vw,44px)}
.lg-contacto__logo svg,.lg-contacto__logo .lg-logo{position:static;inset:auto;display:block;width:100%;height:auto;opacity:1;visibility:visible}
.lg-contacto__tit{margin:0;font-size:clamp(30px,3.2vw,48px);font-weight:300;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.lg-contacto__acciones{grid-column:8/13;align-self:center;display:grid;gap:12px;width:min(100%,420px);justify-items:stretch}
.lg-contacto__boton{box-sizing:border-box;width:100%;background:transparent;font-family:inherit;line-height:1.2;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 1.3em;border-radius:10px;border:1.5px solid color-mix(in srgb,var(--lg-papel) 40%,transparent);color:var(--lg-papel);font-size:16px;font-weight:600;text-decoration:none;transition:background-color .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1),border-color .25s cubic-bezier(.16,1,.3,1),border-radius .25s cubic-bezier(.16,1,.3,1)}
.lg-contacto__boton svg{flex:none;width:18px;height:12px}
.lg-contacto__boton path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lg-contacto__boton:hover{border-radius:50px;border-color:var(--lg-papel)}
.lg-contacto__boton--lleno{background:var(--lg-papel);color:var(--lg-musgo-noche);border-color:var(--lg-papel)}
.lg-contacto__boton:focus-visible,.lg-contacto__enviar:focus-visible{outline:2px solid var(--lg-papel);outline-offset:3px}
.lg-contacto__nota{margin:0;font-size:13px;color:color-mix(in srgb,var(--lg-papel) 75%,var(--lg-musgo-noche))}
.lg-contacto__campo{position:relative;display:block}
.lg-contacto__campo input,.lg-contacto__campo select,.lg-contacto__campo textarea{display:block;width:100%;box-sizing:border-box;min-height:52px;padding:14px 16px;border-radius:10px;border:1px solid color-mix(in srgb,var(--lg-papel) 35%,transparent);background:color-mix(in srgb,var(--lg-papel) 8%,transparent);color:var(--lg-papel);font:inherit;font-size:16px;line-height:22px;transition:border-color .2s ease}
.lg-contacto__campo input:focus,.lg-contacto__campo select:focus,.lg-contacto__campo textarea:focus{border-color:color-mix(in srgb,var(--lg-papel) 85%,transparent);outline:none;box-shadow:none}
/* Etiqueta flotante: dentro del campo en reposo; al enfocar o llenar, sube a la línea superior del borde */
.lg-campo label{position:absolute;left:8px;top:0;z-index:1;padding:2px 8px;border-radius:999px;background:transparent;font-size:16px;line-height:20px;font-weight:400;color:color-mix(in srgb,var(--lg-papel) 75%,var(--lg-musgo-noche));pointer-events:none;transform-origin:left center;transform:translateY(14px);transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1),font-weight .25s cubic-bezier(.16,1,.3,1)}
.lg-campo textarea+label{transform:translateY(12px)}
/* Flotando sobre el borde: chip sólido de papel con texto de tinta (contraste 13:1) */
.lg-campo input:focus+label,.lg-campo input:not(:placeholder-shown)+label,.lg-campo textarea:focus+label,.lg-campo textarea:not(:placeholder-shown)+label,.lg-campo select:focus+label,.lg-campo.tiene-valor select+label{transform:translateY(-50%) scale(.8);background:var(--lg-papel);color:var(--lg-tinta);font-weight:600}
@media (prefers-reduced-motion:reduce){.lg-campo label{transition:background-color .25s ease,color .25s ease}}
.lg-contacto__form.lg-rev.en-vista{clip-path:inset(-16px -8px -8px -8px)}
.lg-contacto__campo textarea{resize:vertical;min-height:120px}
.lg-contacto__enviar{justify-self:start;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 1.6em;border-radius:10px;border:0;background:var(--lg-oxido);color:var(--lg-papel);font-size:15px;font-weight:600;cursor:pointer;transition:background-color .25s ease,border-radius .25s ease,transform .25s ease}
.lg-contacto__enviar:hover{border-radius:50px;background:var(--lg-ladrillo)}
.lg-contacto__enviar:active{transform:scale(.985)}
.lg-contacto__estado{margin:0;font-size:15px;min-height:1.4em}
.lg-contacto__trampa{position:absolute;left:-9999px}
.lg-contacto__pie{overflow:hidden;margin-top:clamp(72px,9vw,120px);padding:0 max(var(--lg-margen),env(safe-area-inset-right,0px)) 0 max(var(--lg-margen),env(safe-area-inset-left,0px))}
.lg-contacto__palabra{margin:0;display:flex;justify-content:space-between;font-weight:900;font-size:clamp(48px,15vw,260px);line-height:.82;letter-spacing:-.02em;max-width:100%;min-width:0}
.lg-contacto__palabra span{background-image:var(--foto);background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:grayscale(1) contrast(1.05);transition:filter .5s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.lg-contacto__palabra span:hover{filter:none}}
@media (prefers-reduced-motion:reduce){.lg-contacto__palabra span{transition:none}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.lg-contacto__palabra span{color:var(--lg-papel);-webkit-text-fill-color:var(--lg-papel)}}
.lg-contacto__legal{margin:12px 0 0;font-size:13px;color:color-mix(in srgb,var(--lg-papel) 75%,var(--lg-musgo-noche))}
@media (max-width:900px){.lg-contacto__cta,.lg-contacto__acciones{grid-column:1/-1}.lg-contacto__acciones{margin-top:40px;width:100%}.lg-contacto__form{gap:14px}}
/* Select de contacto: misma caja que los inputs, sin apariencia nativa, flecha propia */
.lg-contacto__campo select{-webkit-appearance:none;appearance:none;height:52px;padding:14px 44px 14px 16px;margin:0;border-radius:10px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background-color:color-mix(in srgb,var(--lg-papel) 8%,transparent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23F4EFE8' stroke-opacity='.8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.2 6 8l4-3.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 12px}
.lg-contacto__campo select option{color:var(--lg-tinta);background:var(--lg-papel)}

.lg-campo:not(.tiene-valor) select{color:transparent}
.lg-campo:not(.tiene-valor) select:focus{color:transparent}

/* Contacto por AJAX: errores en el campo (chip arriba a la derecha), envío y éxito */
.lg-contacto__ok{align-self:start;box-sizing:border-box;opacity:0;transition:opacity .35s ease;outline:none}
.lg-contacto__ok.visible{opacity:1}
.lg-contacto__ok p{margin:0;font-size:clamp(22px,2vw,28px);font-weight:300;line-height:1.25;letter-spacing:-.02em}
.lg-contacto__form.saliendo{opacity:0;pointer-events:none}
.lg-campo .lg-err{position:absolute;right:8px;top:0;z-index:2;padding:2px 8px;border-radius:999px;background:var(--lg-rojo);color:var(--lg-papel);font-size:16px;line-height:20px;font-weight:600;white-space:nowrap;pointer-events:none;transform-origin:right center;transform:translateY(calc(-50% + 4px)) scale(.8);opacity:0;transition:opacity .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.lg-campo .lg-err.visible{opacity:1;transform:translateY(-50%) scale(.8)}
.lg-campo.invalido input,.lg-campo.invalido select,.lg-campo.invalido textarea{border-color:var(--lg-rojo);box-shadow:0 0 0 1px var(--lg-rojo)}
.lg-contacto__enviar[aria-busy="true"]{opacity:.6;cursor:progress}
.lg-contacto__estado{display:block}
.lg-contacto__estado .lg-err-gral{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--lg-rojo);color:var(--lg-papel);font-size:13px;line-height:20px;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.lg-contacto__estado .lg-err-gral.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.lg-campo .lg-err,.lg-contacto__form,.lg-contacto__ok,.lg-contacto__estado .lg-err-gral{transition:opacity .25s ease}}

/* Pop-up de contacto (base: .lg-visor): dos mitades a ras, formulario a la izquierda, datos de Diego a la derecha */
.lg-pcontacto{width:min(1040px,calc(100vw - 32px));position:fixed;overflow:visible;color-scheme:light}
.lg-pcontacto__caja{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-radius:20px;overflow:hidden;overflow-y:auto;max-height:calc(100svh - 32px);overscroll-behavior:contain;background:var(--lg-papel);color:var(--lg-tinta);box-shadow:0 0 0 1px color-mix(in srgb,var(--lg-tinta) 8%,transparent)}
.lg-pcontacto__izq{padding:clamp(28px,3.5vw,48px);display:grid;gap:24px;align-content:start;min-width:0}
.lg-pcontacto__tit{margin:0;font-size:clamp(28px,2.6vw,36px);font-weight:300;line-height:1.1;letter-spacing:-.025em}
.lg-pcontacto__izq .lg-contacto__form,.lg-pcontacto__izq .lg-contacto__ok{margin:0}
.lg-pcontacto__der{background:var(--lg-papel-2);color:var(--lg-tinta);padding:clamp(28px,3.5vw,48px);display:grid;gap:20px;align-content:start;min-width:0}
.lg-pcontacto__marca{display:block;height:40px;width:auto;max-width:100%;justify-self:start}
.lg-pcontacto__datos{display:grid;gap:16px}
.lg-pcontacto__nombre{margin:0;display:grid;line-height:1.2}
.lg-pcontacto__nombre b{font-size:24px;font-weight:600}
.lg-pcontacto__nombre span{font-size:18px;font-weight:300}
.lg-pcontacto__frase{margin:0;font-size:16px;line-height:1.5;font-weight:300}
.lg-pcontacto__regla{margin:4px 0 0;border:0;height:1px;background:color-mix(in srgb,var(--lg-tinta) 12%,transparent)}
.lg-pcontacto__lista{list-style:none;margin:0;padding:0;display:grid;gap:0}
.lg-pcontacto__lista a{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--lg-tinta);text-decoration:none;font-size:16px;font-weight:500;overflow-wrap:anywhere}
.lg-pcontacto__lista a:hover span{text-decoration:underline;text-underline-offset:4px}
.lg-pcontacto__lista svg{flex:none;width:20px;height:20px}
.lg-pcontacto__lista svg *{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lg-pcontacto__lista a:focus-visible{outline:2px solid var(--lg-rojo);outline-offset:3px;border-radius:6px}
.lg-pcontacto__cerrar{position:absolute;top:16px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 1.1em 0 .9em;border:0;border-radius:50px;background:var(--lg-tinta);color:var(--lg-papel);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.lg-pcontacto__cerrar:hover{background:var(--lg-papel-2);color:var(--lg-tinta)}
.lg-pcontacto__cerrar svg{width:20px;height:20px}
.lg-pcontacto__cerrar path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lg-pcontacto__cerrar:focus-visible{outline:2px solid var(--lg-papel);outline-offset:2px;box-shadow:0 0 0 4px var(--lg-tinta)}
html.lg-sin-scroll{overflow:hidden}
@media (max-width:819px){
	.lg-pcontacto{inset:0;margin:0;width:100vw;max-width:100vw;height:100svh;max-height:100svh}
	.lg-pcontacto__caja{display:flex;flex-direction:column;height:100svh;max-height:100svh;border-radius:0;box-shadow:none}
	.lg-pcontacto__der{order:-1;position:sticky;top:0;z-index:2;flex:none;padding:14px 16px 8px;padding-right:calc(16px + 112px);gap:6px;box-shadow:0 1px 0 color-mix(in srgb,var(--lg-tinta) 12%,transparent)}
	.lg-pcontacto__marca{height:28px}
	.lg-pcontacto__datos{display:contents}
	.lg-pcontacto__nombre{display:block;font-size:16px}
	.lg-pcontacto__nombre b{font-size:18px}
	.lg-pcontacto__nombre span{font-size:16px;margin-left:8px}
	.lg-pcontacto__frase,.lg-pcontacto__regla{display:none}
	.lg-pcontacto__lista{display:flex;flex-wrap:wrap;gap:0 20px;margin-right:-112px}
	.lg-pcontacto__lista a{font-size:15px;gap:8px}
	.lg-pcontacto__izq{padding:28px 20px calc(32px + env(safe-area-inset-bottom,0px));flex:1 0 auto}
	.lg-pcontacto__cerrar{top:12px;right:14px}
}
@media (prefers-reduced-motion:reduce){.lg-pcontacto__cerrar{transition:none}}

/* Pop-up claro: formulario sobre papel, campos y etiquetas en tinta (solo dentro del pop-up) */
.lg-pcontacto .lg-contacto__form{color-scheme:light}
.lg-pcontacto .lg-contacto__campo input,.lg-pcontacto .lg-contacto__campo select,.lg-pcontacto .lg-contacto__campo textarea{background-color:color-mix(in srgb,var(--lg-tinta) 4%,var(--lg-papel));border:1px solid color-mix(in srgb,var(--lg-tinta) 25%,transparent);color:var(--lg-tinta)}
.lg-pcontacto .lg-contacto__campo input:focus,.lg-pcontacto .lg-contacto__campo select:focus,.lg-pcontacto .lg-contacto__campo textarea:focus{border-color:color-mix(in srgb,var(--lg-tinta) 60%,transparent)}
.lg-pcontacto .lg-campo label{color:color-mix(in srgb,var(--lg-tinta) 75%,var(--lg-papel))}
.lg-pcontacto .lg-campo input:focus+label,.lg-pcontacto .lg-campo input:not(:placeholder-shown)+label,.lg-pcontacto .lg-campo textarea:focus+label,.lg-pcontacto .lg-campo textarea:not(:placeholder-shown)+label,.lg-pcontacto .lg-campo select:focus+label,.lg-pcontacto .lg-campo.tiene-valor select+label{background:var(--lg-tinta);color:var(--lg-papel)}
.lg-pcontacto .lg-campo.invalido input,.lg-pcontacto .lg-campo.invalido select,.lg-pcontacto .lg-campo.invalido textarea{border-color:var(--lg-rojo);box-shadow:0 0 0 1px var(--lg-rojo)}
.lg-pcontacto .lg-contacto__campo select{background-color:color-mix(in srgb,var(--lg-tinta) 4%,var(--lg-papel));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%232B2522' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.2 6 8l4-3.8'/%3E%3C/svg%3E")}
.lg-pcontacto .lg-contacto__estado{color:var(--lg-tinta)}
.lg-pcontacto .lg-contacto__enviar:focus-visible{outline:2px solid var(--lg-rojo);outline-offset:3px}

.lg-pcontacto .lg-contacto__campo input[type=text]{padding-right:40px}

/* Diego: el nombre deja de estar fijo cuando la última foto está al centro; desde ahí ambos suben juntos y la sección termina */
.lg-diego__paso:last-child{margin-bottom:0}
.lg-diego__pasos{padding-bottom:max(0px,calc(50svh - min(30vw,420px)*.625))}
@media (max-width:820px){.lg-diego__pasos{padding-bottom:max(0px,calc(50svh - (100vw - 2*var(--lg-margen))*.45))}}

/* Riel (Cómo trabajamos y Otras obras): en escritorio y tablet se ven tres tarjetas completas y asoma la cuarta */
@media (min-width:821px){.lg-metodo__riel,.lg-riel{grid-auto-columns:calc((100% + var(--lg-margen) - var(--gap) * 3) / 3.18)}}