/* ═══════════════════════════════════════════════════════════════════════════
   demo-sala · dirección «Sala» (blueprint: canvas OFINITA v2, 11/11/2026)
   La web es una sala: cada página es una sala con su pared (--wall) y su tinta (--ink);
   la pared toma el color de lo que se mira (página, sección, serie, pieza).
   Parte 1 = el CSS del canvas, scopeado a html.demo-sala (los colores base salen de la
   paleta del sitio: --primary azul · --secondary crema · --tertiary arcilla ·
   --quaternary hilo · --dark noche · --light claro). Parte 2 = Capa B: neutraliza el
   template base y ensambla los módulos (Galería, Productos, Servicios, Proyectos, Blog).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reboot propio (F-10 · layout liviano): sin Bootstrap ni Porto, lo mínimo que la sala daba por
   supuesto. [hidden] es la llave de los menús, la hoja de filtros y los avisos del formulario. */
html.demo-sala [hidden]{display:none!important}
html.demo-sala body{margin:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility}
html.demo-sala h1,html.demo-sala h2,html.demo-sala h3,html.demo-sala h4,html.demo-sala h5,html.demo-sala h6{margin-top:0}
html.demo-sala p{margin-top:0}
html.demo-sala svg{vertical-align:middle}
html.demo-sala table{border-collapse:collapse}



html.demo-sala{
  /* Paredes de la sala. Las 6 de marca salen de la paleta del sitio; las demás se declaran como datos del
     sitio (site.walls.* → --sala-*, ver partials/paredes) y, si no están, se DERIVAN de las 6 con
     color-mix — un re-skin con otros 6 colores no arrastra ningún tono del primer cliente. */
  --crema:var(--sala-crema,var(--secondary)); --azul:var(--sala-azul,var(--primary)); --noche:var(--sala-noche,var(--dark));
  --arcilla:var(--sala-arcilla,var(--tertiary)); --hilo:var(--sala-hilo,var(--quaternary)); --claro:var(--sala-claro,var(--light));
  --arena:var(--sala-arena,color-mix(in oklab,var(--tertiary) 88%,var(--dark)));
  --oscuro:var(--sala-oscuro,color-mix(in oklab,var(--primary) 80%,var(--dark)));
  --bosque:var(--sala-bosque,color-mix(in oklab,var(--dark) 62%,var(--quaternary)));
  --marron:var(--sala-marron,color-mix(in oklab,var(--dark) 72%,var(--tertiary)));
  --tierra:var(--sala-tierra,color-mix(in oklab,var(--quaternary) 45%,var(--dark)));
  --pizarra:var(--sala-pizarra,color-mix(in oklab,var(--primary) 55%,var(--dark) 30%,var(--tertiary)));
  --azul-anio:var(--sala-azul-anio,color-mix(in oklab,var(--primary) 90%,var(--dark)));
  --wall:var(--azul); --ink:var(--claro);
  --serif:var(--sala-serif,"Fraunces"),"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:var(--sala-sans,"Montserrat"),"Helvetica Neue",Arial,sans-serif;
  --hh:64px;
  --gl:max(40px, env(safe-area-inset-left,0px)); --gr:max(40px, env(safe-area-inset-right,0px));
  --logo:url("data:image/svg+xml;base64,");
  --salir:cubic-bezier(.16,1,.3,1); --viaje:cubic-bezier(.66,0,.18,1); --rebote:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
/* Paredes derivadas en OKLCH relativo (navegadores con «relative color syntax»): cada pared toma el TONO y el
   croma de un color de marca y fija su luminosidad, así el contraste con la tinta clara no depende de la marca.
   Con los 6 colores de Ofinita reproducen sus paredes (ΔE < 1); con otros 6, giran con la marca.
   Sin soporte, quedan las de color-mix de arriba. Un #hex en site.walls.* (--sala-*) gana siempre. */
@supports (color: oklch(from red l c h)){
  html.demo-sala{
    --arena:var(--sala-arena,oklch(from var(--tertiary) .755 calc(c * 1.02) calc(h - 13)));
    --oscuro:var(--sala-oscuro,oklch(from var(--primary) .307 calc(c * .87) calc(h + 2.8)));
    --bosque:var(--sala-bosque,oklch(from var(--tertiary) .413 calc(c * 1.18) calc(h + 75.4)));
    --marron:var(--sala-marron,oklch(from var(--tertiary) .326 calc(c * .32) calc(h + .3)));
    --tierra:var(--sala-tierra,oklch(from var(--quaternary) .364 calc(c * .62) calc(h + 15.2)));
    --pizarra:var(--sala-pizarra,oklch(from var(--primary) .417 calc(c * .41) calc(h - 29.8)));
    --azul-anio:var(--sala-azul-anio,oklch(from var(--primary) .340 calc(c * 1.12) calc(h + 3.3)));
  }
}
html.demo-sala *,html.demo-sala *::before,html.demo-sala *::after{box-sizing:border-box}
html.demo-sala{overflow-x:clip; -webkit-text-size-adjust:100%}
html.demo-sala body{margin:0; background:var(--wall); color:var(--ink); font:400 15px/1.6 var(--sans); overflow-x:clip; -webkit-font-smoothing:antialiased;
  transition:background-color .9s ease, color .55s ease}
html.demo-sala body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:31; background:var(--wall); transition:background-color .9s}
html.demo-sala a{color:inherit}
html.demo-sala button,html.demo-sala input,html.demo-sala select,html.demo-sala textarea{font:inherit; color:inherit}
html.demo-sala button{background:none; border:0; padding:0; cursor:pointer}
html.demo-sala img{display:block; max-width:100%}
html.demo-sala :focus-visible{outline:2px solid currentColor; outline-offset:4px; border-radius:2px}
html.demo-sala .rot{font:600 11px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; margin:0}
html.demo-sala .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
html.demo-sala .f{font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; font-weight:300}
html.demo-sala .lect{max-width:62ch}
html.demo-sala .nota{display:none; font:500 12px/1.45 var(--sans); border-left:1.5px dashed currentColor; padding-left:10px; opacity:.8; margin:14px 0 0; max-width:60ch}
html.demo-sala body.rev .nota{display:block}
html.demo-sala body.rev span.nota{display:inline-block}
html.demo-sala .ac{display:none}
html.demo-sala body.rev .ac{display:inline; font:500 11px/1 var(--sans); border:1px dashed currentColor; border-radius:99px; padding:3px 8px; margin-left:6px; vertical-align:.2em; opacity:.8; letter-spacing:0; text-transform:none; font-style:normal}


html.demo-sala #luz{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60vmax 60vmax at var(--mx,50%) var(--my,35%), rgba(255,255,255,.12), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.1))}
html.demo-sala #luz::after{content:""; position:absolute; inset:0; opacity:.45; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
html.demo-sala #ola{position:fixed; inset:0; z-index:44; pointer-events:none; opacity:0}


html.demo-sala .bt{display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:0 24px; border:1.5px solid currentColor; border-radius:999px;
  font:600 11px/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; transition:background-color .35s, color .35s; text-align:center}
html.demo-sala .bt:hover,html.demo-sala .bt.lleno{background:var(--ink); color:var(--wall); border-color:var(--ink)}
html.demo-sala .bt.lleno:hover{background:transparent; color:var(--ink)}
html.demo-sala .bt i{font-style:normal; transition:transform .45s var(--salir)}
html.demo-sala .bt:hover i{transform:translateX(5px)}
html.demo-sala .fila-bt{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
html.demo-sala .fl{display:inline-flex; align-items:center; gap:10px; min-height:44px; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; text-decoration:none}
html.demo-sala .fl::after{content:"→"; transition:transform .45s var(--salir)}
html.demo-sala .fl:hover::after{transform:translateX(5px)}


html.demo-sala .cab{position:fixed; inset:0 0 auto 0; z-index:30; height:calc(var(--hh) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) var(--gr) 0 var(--gl); display:flex; align-items:center; justify-content:space-between; gap:20px;
  transition:background-color .9s, transform .45s var(--salir)}
html.demo-sala body.tapa .cab{background:var(--wall)}
html.demo-sala .logo{display:block; height:var(--logo-h,31px); width:auto; aspect-ratio:var(--logo-ar,4); background:currentColor; -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat; flex:none}
html.demo-sala .nav{display:flex; gap:clamp(12px,1.6vw,26px); align-items:center}
html.demo-sala .nav a{font:600 11px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; padding:14px 0; position:relative; white-space:nowrap; text-decoration:none}
html.demo-sala .nav a::after{content:""; position:absolute; left:0; right:0; bottom:8px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--salir)}
html.demo-sala .nav a:hover::after,html.demo-sala .nav a[aria-current="page"]::after{transform:scaleX(1)}
html.demo-sala .idioma{display:flex; align-items:center; gap:2px; font:600 11px/1 var(--sans); letter-spacing:.1em}
html.demo-sala .idioma i{font-style:normal; opacity:.4}
html.demo-sala .der{display:flex; align-items:center; gap:22px}
html.demo-sala .b-menu{display:none; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; min-height:44px; padding:0 2px}
html.demo-sala .menu-m{position:fixed; inset:0; z-index:29; background:var(--wall); padding:calc(var(--hh) + env(safe-area-inset-top,0px) + 12px) var(--gr) 30px var(--gl); display:flex; flex-direction:column; overflow:auto}
html.demo-sala .menu-m a{font:300 clamp(34px,9vw,48px)/1.18 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; padding:4px 0; text-decoration:none}
html.demo-sala .menu-m a[aria-current="page"]{font-style:italic; text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:1.5px}
html.demo-sala .menu-m .idioma{margin-top:22px; font-size:13px}
html.demo-sala .menu-m .idioma a{min-width:44px}


html.demo-sala .pg{position:relative; z-index:1; background:var(--pw,transparent); color:var(--pk,inherit)}
html.demo-sala.js .pg{display:none; background:none; color:inherit}
html.demo-sala.js .pg.on{display:block}
html.demo-sala.js body:not(.listo) .pg.on{animation:none}
html.demo-sala .pg.bajo{opacity:0; pointer-events:none; transition:opacity .35s}
html.demo-sala .envol{padding-left:var(--gl); padding-right:var(--gr)}
html.demo-sala .ancho{max-width:1360px; margin-inline:auto}
html.demo-sala .apert{padding-top:calc(var(--hh) + 56px); padding-bottom:40px}
html.demo-sala .h-sala{font:300 clamp(64px,10.5vw,168px)/.86 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; letter-spacing:-.04em; margin:14px 0 0 -.04em; text-wrap:balance}
html.demo-sala .h-sala em{font-style:italic}
html.demo-sala .h2{font:300 clamp(36px,4.4vw,66px)/1.02 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; letter-spacing:-.02em; margin:0 0 22px; text-wrap:balance}
html.demo-sala .h2 em{font-style:italic}
html.demo-sala .baj{font:300 clamp(20px,1.9vw,28px)/1.36 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 0; margin:0; max-width:30em; text-wrap:pretty}
html.demo-sala .bloque{padding-block:clamp(70px,11vh,130px)}
html.demo-sala .linea-muro{border:0; height:1.5px; background:currentColor; opacity:.25; margin:0}
html.demo-sala .hilvan{border:0; height:2px; margin:0; background:repeating-linear-gradient(90deg,currentColor 0 12px,transparent 12px 21px); opacity:.5}

html.demo-sala.js .pg.on .sube{animation:sube .9s var(--salir) both; animation-delay:calc(var(--o,0) * 80ms + 120ms)}
@keyframes sube{from{opacity:0; transform:translateY(34px)}to{opacity:1; transform:none}}


html.demo-sala #telon{display:none}
html.demo-sala.js #telon.va{position:fixed; inset:0; z-index:60; background:var(--crema); color:var(--azul); display:grid; place-items:center; pointer-events:none; animation:telon .55s var(--viaje) .3s forwards}
html.demo-sala #telon .logo{width:min(54vw,440px); animation:marca .5s var(--salir) both}
@keyframes telon{to{clip-path:inset(0 0 100% 0); visibility:hidden}}
@keyframes marca{from{opacity:0; transform:translateY(10px)}}
html.demo-sala .antesala{position:relative}
html.demo-sala .escena{position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden}
html.demo-sala .parada{position:absolute; inset:0; --iw:min(calc(66svh * var(--ar)), 34vw)}
html.demo-sala .p-fig{position:absolute; left:50%; top:calc(50% + 10px); width:var(--iw); aspect-ratio:var(--ar); margin:0; transform:translate(-50%,-50%); will-change:transform}
html.demo-sala .p-fig a,html.demo-sala .p-fig>div{display:block; width:100%; height:100%}
html.demo-sala .p-fig img,html.demo-sala .f-marco img,html.demo-sala #viajera,html.demo-sala .sombra{box-shadow:0 34px 60px -26px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.2)}
html.demo-sala .p-fig img{width:100%; height:100%; object-fit:contain}
html.demo-sala .p-a,html.demo-sala .p-b{position:absolute; will-change:transform,opacity}
html.demo-sala .p-a{right:calc(50% + var(--iw)/2 + 3.4vw); top:20svh; text-align:right; max-width:calc(50vw - var(--iw)/2 - 3.4vw - var(--gl))}
html.demo-sala .p-b{left:calc(50% + var(--iw)/2 + 3.4vw); bottom:13svh; max-width:min(27vw, calc(50vw - var(--iw)/2 - 3.4vw - var(--gr)))}
html.demo-sala .titulo{font:300 clamp(40px,4.5vw,70px)/1.02 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; letter-spacing:-.018em; margin:0; text-wrap:balance}
html.demo-sala .titulo em{font-style:italic}
html.demo-sala h1.titulo{display:contents}
html.demo-sala h1.titulo>span{display:block}
html.demo-sala .p-a .rot{margin-bottom:16px}
html.demo-sala .p-a .ident{font:500 13px/1.4 var(--sans); margin:14px 0 0; opacity:.85}
html.demo-sala .p-b .titulo{margin-bottom:20px}
html.demo-sala .p-b p{margin:0 0 22px; max-width:30em; font:400 15px/1.6 var(--sans); letter-spacing:0}
html.demo-sala .p-b .linea{font:300 italic 21px/1.35 var(--serif); font-family:var(--serif)!important}
html.demo-sala .cartela-p{position:absolute; left:var(--gl); bottom:30px; font:500 12px/1.5 var(--sans); max-width:22em}
html.demo-sala .cartela-p b{display:block; font:600 11px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; margin-bottom:6px}
html.demo-sala .paso{position:absolute; right:var(--gr); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:9px}
html.demo-sala .paso i{display:block; width:7px; height:7px; border-radius:50%; border:1.5px solid currentColor; transition:background-color .4s, transform .4s}
html.demo-sala .paso i.on{background:currentColor; transform:scale(1.35)}
html.demo-sala .baja{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); font:600 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; transition:opacity .4s}
html.demo-sala .baja::after{content:""; width:1.5px; height:26px; background:currentColor; animation:gota 1.9s var(--salir) infinite; transform-origin:top}
@keyframes gota{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1); opacity:0}}
html.demo-sala.js .entra .parada[data-i="0"] .p-fig img{animation:abre 1s var(--salir) .25s both}
@keyframes abre{from{clip-path:inset(46% 0 46% 0); transform:scale(1.14)}to{clip-path:inset(0); transform:none}}
html.demo-sala.js .entra .parada[data-i="0"] :is(.p-a>*,.titulo>span,.p-b>p,.p-b>.bt){animation:sube .9s var(--salir) both; animation-delay:calc(.4s + var(--o,0) * .08s)}
html.demo-sala .sobre{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:7vw; align-items:center}
html.demo-sala .sobre figure{margin:0; justify-self:end; width:min(100%,400px)}
html.demo-sala .sobre img{width:100%; height:auto}
html.demo-sala .sobre figcaption{font:300 italic 19px/1.3 var(--serif); font-family:var(--serif)!important; margin-top:14px}
html.demo-sala .sobre .gr{font:300 clamp(21px,2vw,30px)/1.38 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 0; margin:22px 0 30px; max-width:24em; text-wrap:pretty}
html.demo-sala .ruta{display:flex; align-items:center; gap:14px; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; max-width:560px}
html.demo-sala .ruta::before,html.demo-sala .ruta::after{content:""; width:9px; height:9px; border-radius:50%; background:currentColor; flex:none}
html.demo-sala .ruta i{flex:1; height:1.5px; min-width:30px; background:repeating-linear-gradient(90deg,currentColor 0 7px,transparent 7px 13px)}
html.demo-sala .ruta::before{order:0}html.demo-sala .ruta span:first-of-type{order:1}html.demo-sala .ruta i{order:2}html.demo-sala .ruta span:last-of-type{order:3}html.demo-sala .ruta::after{order:4}
html.demo-sala .puertas{list-style:none; padding:0; margin:0}
html.demo-sala .puertas li{border-top:1.5px solid currentColor}
html.demo-sala .puertas li:last-child{border-bottom:1.5px solid currentColor}
html.demo-sala .puerta{display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:3vw; padding:22px 0 26px; text-decoration:none; transition:padding .5s var(--salir)}
html.demo-sala .puerta .n{font:300 clamp(46px,7.2vw,112px)/.98 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; letter-spacing:-.02em}
html.demo-sala .puerta .d{font-size:15px; max-width:26em; justify-self:end; text-align:right}
html.demo-sala .puerta .fx{font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
html.demo-sala .puerta:hover{padding-left:2.6vw}
html.demo-sala .puerta:hover .n{font-style:italic}
html.demo-sala #asoma{position:fixed; left:0; top:0; z-index:28; width:min(22vw,300px); pointer-events:none; opacity:0; transition:opacity .3s; box-shadow:0 30px 50px -24px rgba(0,0,0,.5); will-change:transform}


html.demo-sala .nav-obra{position:sticky; top:calc(var(--hh) + env(safe-area-inset-top,0px)); z-index:20; background:var(--wall); transition:background-color .9s}
html.demo-sala .nav-obra::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:currentColor; opacity:.18}
html.demo-sala .tira{display:flex; align-items:flex-end; gap:4px; padding:22px var(--gr) 12px var(--gl); position:relative}
html.demo-sala .serie{position:relative; flex:1 1 0; min-width:0; display:flex; justify-content:center}
html.demo-sala .serie-a{display:grid; justify-items:center; gap:10px; text-decoration:none; padding:4px 4px 8px; min-width:0; width:100%; position:relative; z-index:2}
html.demo-sala .pila{position:relative; display:block; height:var(--alto,84px); width:calc(var(--alto,84px) * 1.05); transition:height .35s var(--salir), width .35s var(--salir)}
html.demo-sala .pila img{position:absolute; left:50%; bottom:0; height:100%; width:auto; max-width:none; transform:translateX(-50%) rotate(var(--r,0deg)); transition:transform .55s var(--rebote); box-shadow:0 2px 3px rgba(0,0,0,.18), 0 8px 14px -8px rgba(0,0,0,.45)}
html.demo-sala .pila img:nth-child(1){--r:-7deg; z-index:1}html.demo-sala .pila img:nth-child(2){--r:6deg; z-index:2}html.demo-sala .pila img:nth-child(3){--r:-1.5deg; z-index:3}
html.demo-sala .pila .vacia{position:absolute; inset:8% 18%; border:1.5px dashed currentColor; opacity:.5}
html.demo-sala .serie-n{font:500 12.5px/1.2 var(--sans); text-align:center; max-width:9.5em; display:block; text-wrap:balance}
html.demo-sala .serie-n small{display:block; font:600 10px/1.4 var(--sans); letter-spacing:.12em; opacity:.85; font-variant-numeric:tabular-nums; margin-top:2px}
html.demo-sala .serie-a[aria-current] .serie-n{font-weight:600}
html.demo-sala .serie-a[aria-current]::after{content:""; position:absolute; left:18%; right:18%; bottom:0; height:2px; background:currentColor}
html.demo-sala .serie.cero .serie-a{opacity:.3}
html.demo-sala .serie.cero .pila img{filter:grayscale(1)}
html.demo-sala .serie:hover .pila img:nth-child(1),html.demo-sala .serie-a[aria-current] .pila img:nth-child(1){transform:translateX(-82%) rotate(-12deg)}
html.demo-sala .serie:hover .pila img:nth-child(2),html.demo-sala .serie-a[aria-current] .pila img:nth-child(2){transform:translateX(-18%) rotate(11deg)}
html.demo-sala .serie:hover .pila img:nth-child(3),html.demo-sala .serie-a[aria-current] .pila img:nth-child(3){transform:translateX(-50%) translateY(-6px)}

html.demo-sala .abanico{position:absolute; left:50%; bottom:calc(100% - var(--alto,84px) * .92 - 4px); width:0; height:calc(var(--alto,84px) * 1.5); z-index:5; pointer-events:none}
html.demo-sala .abanico a{position:absolute; left:0; bottom:0; display:block; height:100%; transform:translateX(-50%) scale(.4); opacity:0; transform-origin:50% 100%;
  transition:transform .5s var(--salir), opacity .25s; text-decoration:none}
html.demo-sala .abanico img{height:100%; width:auto; max-width:none; box-shadow:0 18px 30px -14px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.2)}
html.demo-sala .abanico a::after{content:attr(data-t); position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%); white-space:nowrap; font:500 11px/1.2 var(--sans);
  background:var(--ink); color:var(--wall); padding:5px 8px; opacity:0; transition:opacity .2s; pointer-events:none}
html.demo-sala .abanico a:hover::after,html.demo-sala .abanico a:focus-visible::after{opacity:1}
html.demo-sala .serie.abierta{z-index:6}
html.demo-sala .serie.abierta .serie-a .pila{opacity:0; transition:opacity .2s}
html.demo-sala .serie.abierta .serie-n>span{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px}
html.demo-sala .serie.abierta .serie-n small::after{content:" →"}
html.demo-sala .serie.abierta .abanico{pointer-events:auto}

html.demo-sala .nav-obra .serie{transition:opacity .25s}
html.demo-sala .nav-obra:has(.serie.abierta) .serie:not(.abierta){opacity:.22}
html.demo-sala .serie.abierta .abanico a{opacity:1; transform:translateX(calc(-50% + var(--x) + var(--off,0px))) translateY(var(--y)) rotate(var(--g)); transition-delay:calc(var(--d) * 28ms)}
html.demo-sala .serie.abierta .abanico a:hover{transform:translateX(calc(-50% + var(--x) + var(--off,0px))) translateY(calc(var(--y) - 14px)) rotate(0deg) scale(1.06); z-index:9}
html.demo-sala .abanico .ver{position:absolute; left:calc(var(--off,0px)); top:calc(100% + 34px); transform:translateX(-50%); opacity:0; white-space:nowrap}
html.demo-sala .serie.abierta .abanico .ver{opacity:1; transition:opacity .3s .15s}
html.demo-sala .ver span{display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:99px; background:var(--ink); color:var(--wall); font:600 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}

html.demo-sala .nav-obra.pegada{--alto:40px}
html.demo-sala .nav-obra.pegada .tira{padding-top:8px; padding-bottom:6px}
html.demo-sala .nav-obra.pegada .serie-a{gap:4px; padding-bottom:6px}
html.demo-sala .nav-obra.pegada .serie-n{font-size:11.5px}
html.demo-sala .nav-obra.pegada .serie-n small{display:none}
html.demo-sala .nav-obra.pegada .abanico{bottom:auto; top:calc(100% + 18px); height:150px}
html.demo-sala .nav-obra.pegada .serie.abierta .serie-a .pila{opacity:1}
html.demo-sala .nav-obra.pegada .abanico a{transform-origin:50% 0}
html.demo-sala .nav-obra.pegada .abanico .ver{top:calc(100% + 30px)}
html.demo-sala .filtros{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:0 var(--gr) 14px var(--gl); min-height:52px}
html.demo-sala .nav-obra.pegada .filtros{padding-bottom:10px}
html.demo-sala .filtros .lbl{font:600 10px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; opacity:.85; margin-right:2px}
html.demo-sala .chip{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border:1.5px solid color-mix(in srgb, currentColor 45%, transparent); border-radius:999px;
  font:500 12.5px/1 var(--sans); white-space:nowrap; text-decoration:none; transition:background-color .3s, color .3s, border-color .3s}
html.demo-sala .chip:hover{border-color:currentColor}
html.demo-sala .chip small{font-size:11px; opacity:.85; font-variant-numeric:tabular-nums}
html.demo-sala .chip[aria-pressed="true"],html.demo-sala .chip[aria-current="true"]{background:var(--ink); color:var(--wall); border-color:var(--ink); font-weight:600}
html.demo-sala .chip.cero{opacity:.35}
html.demo-sala .chip .x{display:none; font-size:14px; margin-left:-2px}
html.demo-sala .chip[aria-pressed="true"] .x{display:inline}
html.demo-sala .chip .sw{display:inline-block; width:26px; height:15px; border:1.5px solid currentColor; border-radius:99px; position:relative}
html.demo-sala .chip .sw::after{content:""; position:absolute; left:2px; top:2px; width:8px; height:8px; border-radius:50%; background:currentColor; transition:transform .35s var(--salir)}
html.demo-sala .chip[aria-pressed="true"] .sw::after{transform:translateX(11px)}
html.demo-sala .sep{width:1.5px; height:22px; background:currentColor; opacity:.25; margin:0 6px}
html.demo-sala .cuenta{margin-left:auto; font:600 12px/1 var(--sans); letter-spacing:.06em; font-variant-numeric:tabular-nums; white-space:nowrap}
html.demo-sala .limpiar{font:600 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; min-height:36px; padding:0 6px}
html.demo-sala .b-filtros{display:none}


html.demo-sala .obra-cab{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:5vw; align-items:end; padding-top:calc(var(--hh) + 34px); padding-bottom:6px}
html.demo-sala .obra-cab .h-sala{font-size:clamp(64px,9vw,140px)}
html.demo-sala .obra-cab .baj{font-size:clamp(18px,1.5vw,22px)}
html.demo-sala .obra-cab .ex{font:500 13px/1.5 var(--sans); margin:14px 0 0; opacity:.85}
html.demo-sala .grilla{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(48px,6vw,84px) clamp(26px,3vw,48px); align-items:end; padding-top:44px; padding-bottom:30px; position:relative}
html.demo-sala .grilla.pocas{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1080px}
html.demo-sala .carta{display:block; text-decoration:none; min-width:0; position:relative}
html.demo-sala .carta[hidden]{display:none}
html.demo-sala .marco{display:block; width:100%; max-width:100%; position:relative; transition:transform .5s var(--salir)}
html.demo-sala .marco img{width:100%; height:100%; object-fit:contain; background:color-mix(in srgb, currentColor 7%, transparent); box-shadow:0 26px 40px -24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.16)}
html.demo-sala .carta:hover .marco{transform:translateY(-8px)}
html.demo-sala .cap{display:block; margin-top:16px}
html.demo-sala .ct{display:block; font:300 italic 19px/1.25 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; text-wrap:balance}
html.demo-sala .cm{display:block; font:500 11.5px/1.45 var(--sans); opacity:.9; margin-top:5px}
html.demo-sala .est{display:inline-flex; align-items:center; gap:7px; font:600 10.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; margin-top:8px}
html.demo-sala .est::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
html.demo-sala .est.reservada::before{background:transparent; box-shadow:inset 0 0 0 1.5px currentColor}
html.demo-sala .est.vendida{opacity:.75}
html.demo-sala .est.vendida::before{border-radius:0; height:1.5px; width:10px}
html.demo-sala .est:empty{display:none}
html.demo-sala .fantasma{position:fixed; z-index:19; pointer-events:none; object-fit:contain}
html.demo-sala .mas{display:flex; justify-content:center; padding-bottom:40px}
html.demo-sala .vacio{padding:60px 0 40px}
html.demo-sala .vacio p{font:300 italic clamp(28px,3.4vw,48px)/1.12 var(--serif); font-family:var(--serif)!important; margin:0 0 24px}
html.demo-sala .tec-desc{max-width:62ch; padding:34px 0 0; border-top:1.5px solid color-mix(in srgb, currentColor 30%, transparent); margin-top:20px}
html.demo-sala .tec-desc h2{font:300 italic 30px/1.1 var(--serif); font-family:var(--serif)!important; margin:10px 0 12px}
html.demo-sala .cierre{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:5vw; align-items:end}
html.demo-sala .cierre .h2{margin:0}


html.demo-sala .velo{position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.42)}
html.demo-sala .hoja{position:fixed; inset:auto 0 0 0; z-index:40; max-height:86svh; background:var(--ink); color:var(--wall); display:flex; flex-direction:column;
  border-radius:18px 18px 0 0; padding-bottom:env(safe-area-inset-bottom,0px); animation:hoja .45s var(--salir)}
@keyframes hoja{from{transform:translateY(100%)}}
html.demo-sala .hoja header{display:flex; justify-content:space-between; align-items:center; padding:10px 12px 4px 20px; flex:none}
html.demo-sala .hoja header b{font:300 italic 24px/1 var(--serif); font-family:var(--serif)!important}
html.demo-sala .hoja header button{min-height:44px; padding:0 10px; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase}
html.demo-sala .hoja .cuerpo{overflow:auto; padding:4px 20px 14px; flex:1}
html.demo-sala .hoja h3{font:600 10px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; margin:16px 0 10px; opacity:.75}
html.demo-sala .hoja .ops{display:flex; flex-wrap:wrap; gap:8px}
html.demo-sala .hoja .op{min-height:44px; padding:0 16px; border:1.5px solid currentColor; border-radius:999px; font:500 14px/1 var(--sans); display:inline-flex; gap:8px; align-items:center}
html.demo-sala .hoja .op i{font-style:normal; opacity:.65; font-size:12px}
html.demo-sala .hoja .op[aria-checked="true"]{background:var(--wall); color:var(--ink); font-weight:600}
html.demo-sala .hoja .op[disabled]{opacity:.35}
html.demo-sala .hoja .interr{display:flex; align-items:center; gap:12px; min-height:48px; font:500 15px/1 var(--sans); margin-top:8px}
html.demo-sala .hoja .interr .sw{display:inline-block; width:34px; height:20px; border:1.5px solid currentColor; border-radius:99px; position:relative}
html.demo-sala .hoja .interr .sw::after{content:""; position:absolute; left:3px; top:3px; width:11px; height:11px; border-radius:50%; background:currentColor; transition:transform .3s}
html.demo-sala .hoja .interr[aria-checked="true"] .sw{background:currentColor}
html.demo-sala .hoja .interr[aria-checked="true"] .sw::after{transform:translateX(14px); background:var(--ink)}
html.demo-sala .hoja .salas{list-style:none; margin:0; padding:0}
html.demo-sala .hoja .salas a{display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; min-height:56px; text-decoration:none; border-top:1px solid color-mix(in srgb, currentColor 25%, transparent)}
html.demo-sala .hoja .salas img{width:40px; height:44px; object-fit:contain}
html.demo-sala .hoja .salas .nom{font:300 22px/1.1 var(--serif); font-family:var(--serif)!important}
html.demo-sala .hoja .salas [aria-current="true"] .nom{font-style:italic; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px}
html.demo-sala .hoja .salas .c{font:500 12px/1 var(--sans); opacity:.7}
html.demo-sala .hoja .salas .cero{opacity:.35}
html.demo-sala .hoja footer{flex:none; padding:10px 20px 14px; display:flex; gap:14px; align-items:center}
html.demo-sala .hoja footer .bt{flex:1; min-height:50px; background:var(--wall); color:var(--ink); border-color:var(--wall)}


html.demo-sala .ficha{position:fixed; inset:0; z-index:22; display:grid; grid-template-columns:minmax(0,1fr) min(30vw,420px); gap:5vw; align-items:center;
  padding:calc(var(--hh) + env(safe-area-inset-top,0px) + 6px) calc(var(--gr) + 2vw) 34px var(--gl); background:var(--wall); transition:background-color .9s}
html.demo-sala .f-escena{display:grid; place-items:center; min-width:0; height:100%; position:relative}
html.demo-sala .f-marco{position:relative; width:min(calc((100svh - var(--hh) - 130px) * var(--ar)), 100%); aspect-ratio:var(--ar); max-width:100%; cursor:crosshair}
html.demo-sala .f-marco img{width:100%; height:100%; object-fit:contain}
html.demo-sala .lupa{position:absolute; left:0; top:0; width:220px; height:220px; margin:-110px 0 0 -110px; border-radius:50%; pointer-events:none; opacity:0; transform:scale(.6);
  transition:opacity .25s, transform .4s var(--salir); background-repeat:no-repeat; box-shadow:0 0 0 1.5px var(--ink), 0 18px 40px -10px rgba(0,0,0,.6)}
html.demo-sala .f-marco.ve .lupa{opacity:1; transform:none}
html.demo-sala .f-minis{display:flex; gap:10px; justify-content:center; margin-top:16px}
html.demo-sala .f-minis button{width:52px; height:62px; padding:3px; border:1.5px solid transparent; opacity:.6}
html.demo-sala .f-minis button[aria-pressed="true"]{border-color:currentColor; opacity:1}
html.demo-sala .f-minis img{width:100%; height:100%; object-fit:contain}
html.demo-sala .f-pista{font:600 10px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; opacity:.7; margin-top:14px; text-align:center}
html.demo-sala .f-cartela{min-width:0; max-height:100%; overflow:auto; padding:6px 4px 6px 0}
html.demo-sala .f-cartela>*{transition:opacity .6s ease, transform .9s var(--salir); transition-delay:calc(var(--o,0) * 70ms + 220ms)}
html.demo-sala .ficha.pre .f-cartela>*{opacity:0; transform:translateY(26px); transition:none}
html.demo-sala .f-volver{display:inline-flex; align-items:center; gap:10px; min-height:44px; font:600 11px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; text-decoration:none}
html.demo-sala .f-cartela h1{font:300 clamp(36px,3.8vw,60px)/1.02 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; letter-spacing:-.02em; margin:18px 0 12px; font-style:italic; text-wrap:balance}
html.demo-sala .f-linea{font:500 13px/1.5 var(--sans); margin:0}
html.demo-sala .f-cartela .est{margin-top:12px}
html.demo-sala .f-datos{margin:22px 0 22px; border-top:1.5px solid currentColor}
html.demo-sala .f-datos div{display:grid; grid-template-columns:7em 1fr; gap:12px; padding:10px 0; border-bottom:1px solid color-mix(in srgb, currentColor 30%, transparent); font-size:14px}
html.demo-sala .f-datos dt{font:600 10px/1.9 var(--sans); letter-spacing:.16em; text-transform:uppercase}
html.demo-sala .f-datos dd{margin:0}
html.demo-sala .f-txt{font-size:13.5px; margin:12px 0 0; max-width:30em}
html.demo-sala .consulta{margin-top:16px; padding:14px 16px; border:1.5px solid currentColor}
html.demo-sala .consulta p{margin:0 0 10px; font-size:13px}
html.demo-sala .consulta .msj{font:300 italic 17px/1.35 var(--serif); font-family:var(--serif)!important; user-select:all}
html.demo-sala .consulta .fila-bt a,html.demo-sala .consulta .fila-bt button{font:600 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; min-height:40px; display:inline-flex; align-items:center}
html.demo-sala .coment{margin-top:22px; padding-top:16px; border-top:1px solid color-mix(in srgb, currentColor 30%, transparent); font-size:13px}
html.demo-sala .coment p{margin:0 0 6px}
html.demo-sala .f-nav{position:absolute; left:0; right:0; bottom:-4px; display:flex; justify-content:space-between; pointer-events:none}
html.demo-sala .f-nav button{pointer-events:auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase}
html.demo-sala .f-pos{font:600 11px/1 var(--sans); letter-spacing:.14em; align-self:center; opacity:.75; font-variant-numeric:tabular-nums}
html.demo-sala .f-cta-m{display:none}
html.demo-sala #viajera{position:fixed; z-index:26; left:0; top:0; transform-origin:0 0; pointer-events:none; object-fit:contain}


html.demo-sala #v-disponible .preguntas{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:5vw}
html.demo-sala .acordeon{border-top:1.5px solid currentColor}
html.demo-sala .acordeon details{border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent)}
html.demo-sala .acordeon summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:18px; align-items:center; min-height:64px; padding:12px 0; font:300 22px/1.25 var(--serif); font-family:var(--serif)!important}
html.demo-sala .acordeon summary::-webkit-details-marker{display:none}
html.demo-sala .acordeon summary::after{content:"+"; font:300 30px/1 var(--serif); font-family:var(--serif)!important; flex:none; transition:transform .4s var(--salir)}
html.demo-sala .acordeon details[open] summary::after{transform:rotate(45deg)}
html.demo-sala .acordeon .resp{padding:0 0 22px; max-width:60ch}
html.demo-sala .acordeon .resp p{margin:0}


html.demo-sala .enc-ap{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:5vw; align-items:end}
html.demo-sala .enc-ap figure{margin:0; position:relative}
html.demo-sala .enc-ap figure img{width:100%; height:auto; aspect-ratio:2/3; object-fit:cover}
html.demo-sala .materias{display:flex; flex-wrap:wrap; gap:.1em .5em; font:300 clamp(30px,3.4vw,52px)/1 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; margin:28px 0 0; padding:0; list-style:none}
html.demo-sala .materias li{font-style:italic}
html.demo-sala .materias li+li::before{content:"·"; font-style:normal; margin-right:.5em; opacity:.5}
html.demo-sala .costura{position:relative; padding-top:20px}
html.demo-sala .costura svg{position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none}
html.demo-sala .costura path{fill:none; stroke:var(--hilo); stroke-width:2.2; stroke-linecap:round}
html.demo-sala .pasos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3vw; position:relative}
html.demo-sala .pasos li{display:grid; gap:14px; align-content:start; padding-top:110px; position:relative}
html.demo-sala .pasos .num{position:absolute; top:0; left:0; font:400 104px/1 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; color:transparent; -webkit-text-stroke:1.5px currentColor; transition:color .6s}
html.demo-sala .pasos li.cosido .num{color:currentColor}
html.demo-sala .pasos strong{font:300 26px/1.15 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; display:block}
html.demo-sala .pasos p{margin:0; font-size:14px; max-width:28em}
html.demo-sala .dos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6vw; align-items:start}
html.demo-sala .dos figure{margin:0}
html.demo-sala .dos img{width:100%; height:auto}
html.demo-sala .dos figcaption{font:500 12px/1.5 var(--sans); margin-top:12px}
html.demo-sala .dos figcaption em{font:300 italic 18px/1.3 var(--serif); font-family:var(--serif)!important}
html.demo-sala .lado{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:5vw; align-items:start}


html.demo-sala .form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 26px}
html.demo-sala .form .ancho-c{grid-column:1/-1}
html.demo-sala .campo{display:grid; gap:6px; min-width:0}
html.demo-sala .campo label,html.demo-sala .form legend{font:600 11px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase}
html.demo-sala .campo label small,html.demo-sala .form legend small{font-weight:500; letter-spacing:.04em; text-transform:none; opacity:.7; margin-left:6px}
html.demo-sala .campo input,html.demo-sala .campo select,html.demo-sala .campo textarea{width:100%; min-height:52px; padding:12px 2px; background:transparent; border:0; border-bottom:1.5px solid currentColor; border-radius:0; font:300 22px/1.3 var(--serif); font-family:var(--serif)!important; color:inherit}
html.demo-sala .campo select option{color:var(--oscuro); background:var(--claro)}
html.demo-sala .campo textarea{min-height:130px; resize:vertical}
html.demo-sala .campo input:focus,html.demo-sala .campo select:focus,html.demo-sala .campo textarea:focus{outline:none; border-bottom-width:3px}
html.demo-sala .campo .ayuda{font-size:12.5px; line-height:1.45; opacity:.8}
html.demo-sala .campo [aria-invalid="true"]{border-bottom-style:dashed}
html.demo-sala .error{font:600 12px/1.3 var(--sans)}
html.demo-sala .error:empty{display:none}
html.demo-sala .error::before{content:"↑ "}
html.demo-sala .form fieldset{border:0; padding:0; margin:0; min-width:0}
html.demo-sala .motivos{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
html.demo-sala .motivos label{position:relative; display:inline-flex; align-items:center; min-height:48px; padding:0 20px; border:1.5px solid currentColor; border-radius:99px; cursor:pointer; font:300 19px/1 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; transition:background-color .3s, color .3s}
html.demo-sala .motivos input{position:absolute; opacity:0; inset:0; cursor:pointer}
html.demo-sala .motivos label:has(input:checked){background:var(--ink); color:var(--wall); font-style:italic}
html.demo-sala .motivos label:has(input:focus-visible){outline:2px solid currentColor; outline-offset:3px}
html.demo-sala .check{display:flex; gap:12px; align-items:center; min-height:44px; font-size:14px}
html.demo-sala .check input{width:20px; height:20px; accent-color:currentColor}
html.demo-sala .enviado{border-left:2px solid currentColor; padding:14px 20px}
html.demo-sala .enviado h3{font:300 italic 30px/1.1 var(--serif); font-family:var(--serif)!important; margin:0 0 8px}
html.demo-sala .canales{list-style:none; margin:0; padding:0; border-top:1.5px solid currentColor}
html.demo-sala .canales li{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; min-height:58px; padding:8px 0; border-bottom:1px solid color-mix(in srgb, currentColor 30%, transparent)}
html.demo-sala .canales .rot{min-width:7.5em}
html.demo-sala .canales .dato{font:300 21px/1.2 var(--serif); font-family:var(--serif)!important; user-select:all}
html.demo-sala .canales button{font:600 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; min-height:36px}


html.demo-sala .tal{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:6vw; align-items:center; min-height:calc(100svh - 40px); padding-top:calc(var(--hh) + 30px); padding-bottom:60px}
html.demo-sala .mesa{position:relative; height:min(66svh,620px)}
html.demo-sala .mesa img{position:absolute; left:50%; top:50%; width:52%; height:auto; transform:translate(-50%,-50%) rotate(var(--r0)); transition:transform 1.1s var(--salir); box-shadow:0 30px 50px -24px rgba(0,0,0,.55)}
html.demo-sala .mesa img:nth-child(1){--r0:-4deg; --r1:-11deg; --x1:-58%}
html.demo-sala .mesa img:nth-child(2){--r0:3deg; --r1:9deg; --x1:58%}
html.demo-sala .mesa img:nth-child(3){--r0:-1deg; --r1:0deg; --x1:0%}
html.demo-sala .mesa.abre img{transform:translate(calc(-50% + var(--x1)),-50%) rotate(var(--r1))}
html.demo-sala .mesa.abre img:nth-child(3){transform:translate(-50%,-56%)}
html.demo-sala .tal .baj{font-size:clamp(20px,1.7vw,25px)}


html.demo-sala .anios{position:relative}
html.demo-sala .anio{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:5vw; padding-block:12vh}
html.demo-sala .anio>h2,html.demo-sala .anio>.anio-t{position:sticky; top:calc(var(--hh) + 30px); align-self:start; margin:0; font:300 clamp(110px,15vw,240px)/.82 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; letter-spacing:-.05em;
  /* año en contorno: el trazo es la tinta (contraste real tinta/pared); el relleno se vacía con
     text-fill-color, así `color` sigue diciendo el color que se ve (axe medía el relleno transparente). */
  color:inherit; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.5px currentColor; transition:-webkit-text-fill-color .8s}
html.demo-sala .anio.aqui>h2,html.demo-sala .anio.aqui>.anio-t{-webkit-text-fill-color:currentColor}
html.demo-sala .muestras{display:grid; gap:80px; min-width:0}
html.demo-sala .muestra{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3vw; align-items:start}
html.demo-sala .muestra.sola,html.demo-sala .muestra.sin-foto,html.demo-sala .muestra:not(:has(figure)){grid-template-columns:minmax(0,1fr)}
html.demo-sala .muestra h3,html.demo-sala .muestra .muestra-t{font:300 clamp(30px,3vw,46px)/1.05 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; margin:8px 0 14px}
html.demo-sala .muestra p{margin:0 0 12px}
html.demo-sala .muestra figure{margin:0}
html.demo-sala .muestra img{width:100%; height:auto}
html.demo-sala .muestra .fotos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
html.demo-sala .marco-vacio{display:none}
html.demo-sala body.rev .marco-vacio{display:grid; place-items:center; aspect-ratio:4/5; border:1.5px dashed currentColor; padding:20px; font:500 12px/1.45 var(--sans); text-align:center; opacity:.8}


html.demo-sala .notas{display:grid; gap:12vh; padding-top:40px}
html.demo-sala .nota-c{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:5vw; align-items:center; text-decoration:none}
html.demo-sala .nota-c:nth-child(2n){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
html.demo-sala .nota-c:nth-child(2n) figure{order:2}
html.demo-sala .nota-c figure{margin:0; overflow:hidden}
html.demo-sala .nota-c img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; clip-path:inset(6% 6% 6% 6%); transform:scale(1.04); transition:clip-path .9s var(--salir), transform 1.2s var(--salir)}
html.demo-sala .nota-c:hover img,html.demo-sala .nota-c:focus-visible img{clip-path:inset(0); transform:none}
html.demo-sala .nota-c h2{font:300 clamp(34px,3.8vw,58px)/1.04 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; margin:12px 0 16px; text-wrap:balance}
html.demo-sala .nota-c:hover h2{font-style:italic}
html.demo-sala .nota-v .cabeza{position:relative; height:min(78svh,760px); overflow:hidden}
html.demo-sala .nota-v .cabeza img{position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; will-change:transform}
html.demo-sala .nota-v .cuerpo{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:5vw; padding-block:70px}
html.demo-sala .nota-v h1{font:300 clamp(40px,4.6vw,72px)/1.02 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; margin:12px 0 0; text-wrap:balance}
html.demo-sala .nota-v .texto p{font:300 clamp(19px,1.6vw,24px)/1.5 var(--serif); font-family:var(--serif)!important; margin:0 0 20px}
html.demo-sala .salieron{margin-top:40px; display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center}
html.demo-sala .salieron .pila{--alto:150px}
html.demo-sala .salieron:hover .pila img:nth-child(1){transform:translateX(-95%) rotate(-12deg)}
html.demo-sala .salieron:hover .pila img:nth-child(2){transform:translateX(-5%) rotate(10deg)}


html.demo-sala .sm-ap{padding-top:calc(var(--hh) + 30px)}
html.demo-sala .sm-foto{margin:40px 0 0; position:relative; overflow:hidden}
html.demo-sala .sm-foto img{width:100%; height:auto; aspect-ratio:16/8; object-fit:cover; object-position:50% 40%}
html.demo-sala .sm-bio{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:6vw; align-items:start}
html.demo-sala .sm-bio p{margin:0 0 20px}
html.demo-sala .sm-bio .prim{font:300 clamp(21px,1.9vw,28px)/1.4 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 0}
html.demo-sala .sm-bio figure{margin:0; position:sticky; top:calc(var(--hh) + 30px)}
html.demo-sala .viaje{position:relative; height:240svh}
html.demo-sala .viaje-esc{position:sticky; top:0; height:100svh; display:grid; place-items:center; overflow:hidden}
html.demo-sala .viaje-in{width:min(1100px,100%); padding:0 var(--gr) 0 var(--gl)}
html.demo-sala .viaje svg{width:100%; height:auto; overflow:visible; display:block}
html.demo-sala .viaje .curva{fill:none; stroke:currentColor; stroke-width:1.5; stroke-dasharray:6 8; opacity:.5}
html.demo-sala .viaje .hecha{fill:none; stroke:currentColor; stroke-width:2}
html.demo-sala .viaje circle{fill:currentColor}
html.demo-sala .viaje .ciudad{font:300 italic clamp(26px,3vw,44px)/1 var(--serif); font-family:var(--serif)!important}
html.demo-sala .viaje .km{font:300 clamp(64px,10vw,150px)/.9 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; margin:30px 0 8px}
html.demo-sala .viaje .pie-v{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font:600 11px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase}
html.demo-sala .trabajo{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:6vw; align-items:start}
html.demo-sala .trabajo p{margin:0 0 18px}
html.demo-sala .cita{font:300 italic clamp(30px,3.4vw,52px)/1.15 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; margin:30px 0 0; text-wrap:balance}
html.demo-sala .tecnicas{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px}
html.demo-sala .tecnicas article{border-top:1.5px solid currentColor; padding-top:16px; min-width:0}
html.demo-sala .tecnicas h3{font:300 italic 30px/1.1 var(--serif); font-family:var(--serif)!important; margin:0 0 12px}
html.demo-sala .tecnicas p{font-size:13.5px; margin:0 0 12px}
html.demo-sala .estudio{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px var(--gr) 24px var(--gl); scrollbar-width:none; cursor:grab}
html.demo-sala .estudio::-webkit-scrollbar{display:none}
html.demo-sala .estudio figure{flex:none; margin:0; scroll-snap-align:start; width:clamp(220px,24vw,340px)}
html.demo-sala .estudio img{width:100%; aspect-ratio:4/5; object-fit:cover; pointer-events:none}
html.demo-sala .estudio figcaption{font:500 12px/1.4 var(--sans); margin-top:10px; opacity:.85}


html.demo-sala .co{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:6vw; align-items:start}
html.demo-sala .relojes{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0 0 28px}
html.demo-sala .reloj b{display:block; font:300 clamp(44px,4.5vw,68px)/1 var(--serif); font-family:var(--serif)!important; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
html.demo-sala .reloj span{font:600 10px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; opacity:.8}
html.demo-sala .asunto-obra{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:14px; font-size:14px}
html.demo-sala .asunto-obra em{font:300 italic 20px/1.2 var(--serif); font-family:var(--serif)!important}


html.demo-sala #v-plan{font-size:14px}
html.demo-sala #v-plan h2{font:300 34px/1.1 var(--serif); font-family:var(--serif)!important; margin:60px 0 16px}
html.demo-sala #v-plan h3{font:600 12px/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase; margin:30px 0 12px}
html.demo-sala #v-plan li{margin-bottom:6px; max-width:90ch}
html.demo-sala .sup{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; list-style:none; padding:0; margin:0}
html.demo-sala .sup li{border-top:1.5px solid currentColor; padding-top:12px}
html.demo-sala .sup b{display:block; font:300 italic 22px/1.2 var(--serif); font-family:var(--serif)!important; margin-bottom:6px}
html.demo-sala .tabla{overflow-x:auto; max-width:100%; border-top:1.5px solid currentColor}
html.demo-sala .tabla table{border-collapse:collapse; width:100%; min-width:680px}
html.demo-sala .tabla th,html.demo-sala .tabla td{text-align:left; vertical-align:top; padding:9px 10px 9px 0; border-bottom:1px solid color-mix(in srgb, currentColor 25%, transparent)}
html.demo-sala .tabla th{font:600 10px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase}
html.demo-sala .tabla td:first-child{white-space:nowrap}
html.demo-sala .conm{display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:0 20px; border:1.5px solid currentColor; border-radius:99px; font:600 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase}


html.demo-sala .pie{position:relative; z-index:1; padding:60px var(--gr) 40px var(--gl)}
html.demo-sala .pie>.logo{max-width:1360px;width:min(100%,720px); margin:0 0 40px; opacity:.92}
html.demo-sala .pie-g{max-width:1360px; margin:0 auto; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); gap:5vw; font-size:13.5px}
html.demo-sala .pie-g p{margin:0 0 12px}
html.demo-sala .pie-g ul{list-style:none; margin:0; padding:0; columns:2}
html.demo-sala .pie-g ul a{display:inline-flex; min-height:36px; align-items:center; text-decoration:none; font:600 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase}
html.demo-sala .pie-g ul a:hover{text-decoration:underline}
html.demo-sala .news form{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
html.demo-sala .news input{flex:1 1 180px; min-width:0; min-height:48px; background:transparent; border:0; border-bottom:1.5px solid currentColor; font:300 19px/1 var(--serif); font-family:var(--serif)!important; padding:0 2px}
html.demo-sala .news input::placeholder{color:inherit; opacity:.6}
html.demo-sala .pie-fin{max-width:1360px; margin:40px auto 0; padding-top:16px; border-top:1px solid color-mix(in srgb, currentColor 30%, transparent); display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:space-between; font-size:12px; opacity:1}
html.demo-sala .pie-fin p{margin:0}


@media (max-width:1180px){
  html.demo-sala .nav{display:none} html.demo-sala .b-menu{display:inline-flex; align-items:center}
  html.demo-sala .cab .idioma{display:none}
  html.demo-sala .tira{overflow-x:auto; scrollbar-width:none; gap:6px; -webkit-mask:linear-gradient(90deg,#000 calc(100% - 50px),transparent); mask:linear-gradient(90deg,#000 calc(100% - 50px),transparent); cursor:grab}
  html.demo-sala .tira::-webkit-scrollbar{display:none}
  html.demo-sala .serie{flex:none; width:104px}
  html.demo-sala .grilla{grid-template-columns:repeat(3,minmax(0,1fr))}
  html.demo-sala .tecnicas{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.demo-sala .sup{grid-template-columns:repeat(2,minmax(0,1fr))}
}


@media (max-width:820px){
  html.demo-sala{--hh:52px; --gl:max(20px, env(safe-area-inset-left,0px)); --gr:max(20px, env(safe-area-inset-right,0px))}
  html.demo-sala body{font-size:15px}
  html.demo-sala .cab{background:var(--wall)}
  html.demo-sala body.en-inicio:not(.tapa) .cab{background:transparent}
  html.demo-sala .logo{height:calc(var(--logo-h,31px) * .8)}
  html.demo-sala #luz{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,0) 40%, rgba(0,0,0,.08))}
  html.demo-sala .apert{padding-top:calc(var(--hh) + 30px); padding-bottom:24px}
  html.demo-sala .bloque{padding-block:64px}
  html.demo-sala .h-sala{font-size:clamp(54px,17vw,84px)}
  
  html.demo-sala .parada{--iw:min(calc(58svh * var(--ar)), 86vw)}
  html.demo-sala .p-fig{top:calc(50% + 20px)}
  html.demo-sala .p-a{left:var(--gl); right:var(--gr); top:calc(var(--hh) + 10px); text-align:left; max-width:none}
  html.demo-sala .p-b{left:var(--gl); right:var(--gr); bottom:20px; max-width:none}
  html.demo-sala .titulo{font-size:clamp(32px,9.6vw,44px)}
  html.demo-sala .p-a .rot{margin-bottom:8px} html.demo-sala .p-a .ident{display:none}
  html.demo-sala .p-b .titulo{margin-bottom:12px}
  html.demo-sala .p-b p{display:none} html.demo-sala .p-b p.linea{display:block; font-size:17px; margin-bottom:12px}
  html.demo-sala .cartela-p,html.demo-sala .baja{display:none}
  html.demo-sala .paso{right:7px; gap:7px} html.demo-sala .paso i{width:5px; height:5px}
  html.demo-sala .sobre{grid-template-columns:1fr; gap:30px} html.demo-sala .sobre figure{justify-self:start; width:72%}
  html.demo-sala .puerta{grid-template-columns:1fr auto; gap:6px 14px; padding:16px 0 18px}
  html.demo-sala .puerta .n{font-size:clamp(42px,12.5vw,58px)}
  html.demo-sala .puerta .d{grid-column:1/-1; grid-row:2; text-align:left; justify-self:start; font-size:14px}
  html.demo-sala #asoma{display:none}
  
  html.demo-sala .obra-cab{grid-template-columns:1fr; gap:6px; padding-top:calc(var(--hh) + 16px); padding-bottom:12px}
  html.demo-sala .obra-cab .h-sala{font-size:clamp(46px,14vw,64px); margin-top:6px}
  html.demo-sala .obra-cab .baj{font-size:15.5px; line-height:1.42; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  html.demo-sala .obra-cab .ex{display:none}
  html.demo-sala .nav-obra{display:flex; align-items:center; height:56px; border-top:1.5px solid color-mix(in srgb, currentColor 18%, transparent)}
  html.demo-sala .nav-obra .tira{flex:1; min-width:0; height:56px; align-items:center; gap:6px; padding:0 30px 0 var(--gl); -webkit-mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent); mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  html.demo-sala .nav-obra{--alto:30px}
  html.demo-sala .nav-obra .serie{width:auto}
  html.demo-sala .nav-obra .serie-a{display:flex; align-items:center; gap:8px; height:44px; padding:0 12px 0 6px; border:1.5px solid color-mix(in srgb, currentColor 40%, transparent); border-radius:99px; width:auto}
  html.demo-sala .nav-obra .pila{width:26px; height:30px}
  html.demo-sala .nav-obra .pila img{box-shadow:0 1px 2px rgba(0,0,0,.3); width:22px; height:28px; object-fit:cover}
  html.demo-sala .nav-obra .serie:hover .pila img,html.demo-sala .nav-obra .serie-a[aria-current] .pila img{transform:translateX(-50%) rotate(var(--r,0deg))}
  html.demo-sala .nav-obra .serie-n{font-size:13px; white-space:nowrap; max-width:none; display:flex; gap:6px; align-items:baseline}
  html.demo-sala .nav-obra .serie-n small{display:inline; font-size:11px; margin:0; letter-spacing:0}
  html.demo-sala .nav-obra .serie-a[aria-current]{background:var(--ink); color:var(--wall); border-color:var(--ink)}
  html.demo-sala .nav-obra .serie-a[aria-current]::after{display:none}
  html.demo-sala .nav-obra .abanico,html.demo-sala .nav-obra .filtros{display:none}
  html.demo-sala .b-filtros{display:inline-flex; align-items:center; gap:6px; flex:none; height:44px; margin-right:var(--gr); padding:0 14px; border-radius:99px; background:var(--ink); color:var(--wall); font:600 12px/1 var(--sans); white-space:nowrap}
  html.demo-sala .b-filtros b{font-weight:600; opacity:.75; font-variant-numeric:tabular-nums}
  html.demo-sala .aplic-m{display:flex; flex-wrap:wrap; gap:8px; padding-top:14px}
  html.demo-sala .aplic-m:empty{display:none}
  html.demo-sala .grilla,html.demo-sala .grilla.pocas{grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 16px; padding-top:18px}
  html.demo-sala .ct{font-size:16px} html.demo-sala .cm{font-size:11px}
  html.demo-sala .cierre,html.demo-sala .lado,html.demo-sala .dos,html.demo-sala .enc-ap,html.demo-sala .tal,html.demo-sala .co,html.demo-sala .sm-bio,html.demo-sala .trabajo,html.demo-sala .muestra,html.demo-sala #v-disponible .preguntas{grid-template-columns:1fr; gap:34px}
  
  html.demo-sala .ficha{display:block; overflow-y:auto; padding:calc(var(--hh) + env(safe-area-inset-top,0px) + 4px) 0 calc(72px + env(safe-area-inset-bottom,0px) + 30px)}
  html.demo-sala .f-escena{height:auto; padding:6px var(--gr) 0 var(--gl)}
  html.demo-sala .f-marco{width:min(calc(54svh * var(--ar)), 100%); cursor:zoom-in}
  html.demo-sala .f-marco.cerca{overflow:auto; cursor:zoom-out} html.demo-sala .f-marco.cerca img{width:230%; height:auto; max-width:none}
  html.demo-sala .lupa,html.demo-sala .f-nav{display:none}
  html.demo-sala .f-cartela{padding:14px var(--gr) 0 var(--gl); overflow:visible; max-height:none}
  html.demo-sala .f-cartela h1{font-size:clamp(32px,9vw,42px); margin:4px 0 8px}
  html.demo-sala .f-cartela .bt-consulta{display:none}
  html.demo-sala .f-cta-m{display:flex; position:fixed; inset:auto 0 0 0; z-index:32; height:calc(64px + env(safe-area-inset-bottom,0px)); padding:8px var(--gr) calc(8px + env(safe-area-inset-bottom,0px)) var(--gl); gap:10px; background:var(--wall); align-items:center; border-top:1px solid color-mix(in srgb, currentColor 20%, transparent)}
  html.demo-sala .f-cta-m .bt{flex:1; min-height:48px}
  html.demo-sala .f-cta-m .flc{flex:none; width:48px; height:48px; border:1.5px solid currentColor; border-radius:50%; font-size:17px; display:grid; place-items:center}
  
  html.demo-sala .enc-ap figure{order:-1} html.demo-sala .enc-ap figure img{aspect-ratio:4/3}
  html.demo-sala .pasos{grid-template-columns:1fr; gap:0; padding-left:56px}
  html.demo-sala .pasos li{padding:0 0 34px; min-height:120px}
  html.demo-sala .pasos .num{left:-60px; top:-10px; font-size:64px}
  html.demo-sala .form{grid-template-columns:1fr}
  html.demo-sala .tal{padding-top:calc(var(--hh) + 20px); min-height:0}
  html.demo-sala .mesa{height:58vw; order:-1}
  html.demo-sala .anio{grid-template-columns:1fr; padding-block:50px; gap:20px}
  /* celular: el año no se pega (se montaba sobre el texto de las muestras) */
  html.demo-sala .anio>h2,html.demo-sala .anio>.anio-t{position:static; font-size:clamp(84px,26vw,120px)}
  html.demo-sala .muestras{gap:50px}
  html.demo-sala .nota-c,html.demo-sala .nota-c:nth-child(2n){grid-template-columns:1fr; gap:18px}
  html.demo-sala .nota-c:nth-child(2n) figure{order:0}
  html.demo-sala .nota-c img{clip-path:none; transform:none}
  html.demo-sala .nota-v .cuerpo{grid-template-columns:1fr; gap:20px; padding-block:40px}
  html.demo-sala .nota-v .cabeza{height:52svh}
  html.demo-sala .sm-foto img{aspect-ratio:4/3}
  html.demo-sala .sm-bio figure{position:static}
  html.demo-sala .viaje{height:200svh}
  html.demo-sala .tecnicas,html.demo-sala .sup{grid-template-columns:1fr}
  html.demo-sala .relojes{grid-template-columns:1fr 1fr}
  html.demo-sala .pie-g{grid-template-columns:1fr; gap:34px}
  html.demo-sala .cuenta{display:none}
}
@media (min-width:821px){ html.demo-sala .aplic-m{display:none} }

html.demo-sala .pg [style*="--pw"]{background:var(--pw); color:var(--pk,inherit)}
html.demo-sala.js .pg [style*="--pw"]{background:none; color:inherit}

html.demo-sala .antesala.quieto .escena{position:relative; height:auto; overflow:visible}
html.demo-sala .antesala.quieto .parada{position:relative; height:100svh; min-height:560px; visibility:visible!important}
html.demo-sala .antesala.quieto .cartela-p,html.demo-sala .antesala.quieto .paso,html.demo-sala .antesala.quieto .baja{display:none}
html.demo-sala .rm *,html.demo-sala .rm *::before,html.demo-sala .rm *::after{animation:none!important; transition-duration:.01s!important; transition-delay:0s!important}
html.demo-sala body.con-ficha .pie{visibility:hidden}
html.demo-sala .sup-lista{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; list-style:none; padding:0; margin:0}
html.demo-sala .sup-lista li{border-top:1.5px solid currentColor; padding-top:12px; max-width:none}
html.demo-sala .sup-lista b{display:block; font:300 italic 20px/1.25 var(--serif); font-family:var(--serif)!important; margin-bottom:6px}
html.demo-sala #v-plan code{font-size:.92em}
html.demo-sala #v-plan .tabla table{font-size:13px}
@media (max-width:1180px){ html.demo-sala .sup-lista{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){ html.demo-sala .sup-lista{grid-template-columns:1fr}
  html.demo-sala #nav-proc .filtros{display:flex; flex-wrap:nowrap; overflow-x:auto; height:56px; align-items:center; padding:0 var(--gr) 0 var(--gl)!important; scrollbar-width:none; width:100%}
  html.demo-sala #cuenta-d{display:none} }
@media (min-width:821px){ html.demo-sala #cuenta-dm{display:none} }

@media (prefers-reduced-motion:reduce){
  html.demo-sala #telon{display:none!important}
  html.demo-sala *,html.demo-sala *::before,html.demo-sala *::after{animation:none!important; transition-duration:.01s!important; transition-delay:0s!important}
}



/* ═════════════ Parte 2 · Capa B: template base neutralizado + ensamble ═════════════ */
/* el template base no pinta: la pared es del body */
html.demo-sala body{background:var(--wall)!important; color:var(--ink)!important}
html.demo-sala .body,html.demo-sala .main,html.demo-sala div[role="main"]{background:transparent!important; color:inherit}
/* :where() = especificidad mínima (0,1,1): neutraliza lo heredado del layout sin pisar las clases
   de la sala (.rot, labels con tracking) — antes pisaba el espaciado de los rótulos. */
html.demo-sala :where(.main) :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label),html.demo-sala :where(.pie) :where(p){color:inherit; letter-spacing:inherit}
html.demo-sala .main :is(h1,h2,h3,h4,h5,h6){font-family:var(--serif); font-family:var(--serif)!important; text-transform:none}
/* El rótulo (.rot) es sans en mayúsculas aunque vaya en un h2/h3 (p. ej. «También podés escribirme por acá»). */
html.demo-sala .main .rot{font-family:var(--sans)!important; text-transform:uppercase}
html.demo-sala .main a:not(.bt):not(.chip),html.demo-sala .pie a{color:inherit}
html.demo-sala .main .text-color-dark{color:inherit!important}
/* lo que el layout base agrega y la sala no usa (F-10: hoy se oculta, no deja de cargarse) */
html.demo-sala .loading-overlay{display:none!important}
html.demo-sala body.loading-overlay-showing{overflow:visible!important}
html.demo-sala{--font-family-primary:var(--sans);--font-family-secondary:var(--sans);--font-family-tertiary:var(--sans)}
html.demo-sala .float-wsp,html.demo-sala #cdLangSwitcherFloating,html.demo-sala .dropdown:has(> #cdLangSwitcherFloating),html.demo-sala .scroll-to-top,html.demo-sala .whatsapp-float,html.demo-sala .whatsapp-button,html.demo-sala #whatsapp-float,html.demo-sala .floating-whatsapp,html.demo-sala .language-selector-floating,html.demo-sala .lang-floating{display:none!important}
html.demo-sala .recaptcha-notice{background:transparent!important; border:0!important}
html.demo-sala .recaptcha-notice p,html.demo-sala .recaptcha-notice a{color:inherit!important; opacity:.6}
/* luz de sala detrás del contenido */
html.demo-sala #luz{z-index:0}
html.demo-sala .main,html.demo-sala .pie{position:relative; z-index:1}
/* marca */
html.demo-sala .logo-sala{display:block; color:inherit; text-decoration:none; flex:none}
html.demo-sala .logo-sala.logo{width:auto; max-width:min(60vw,320px)}
html.demo-sala .logo-txt{font:400 26px/1 var(--serif); font-family:var(--serif)!important; font-variation-settings:"SOFT" 100,"WONK" 1; letter-spacing:.02em; margin:0}
html.demo-sala .pie .logo{height:auto; width:min(54vw,420px); max-height:30vh; aspect-ratio:var(--logo-ar,4)}
html.demo-sala .sala-saltar{position:absolute; left:-9999px; top:8px; z-index:70; background:var(--ink); color:var(--wall); padding:10px 16px}
html.demo-sala .sala-saltar:focus{left:12px}
/* idioma en texto (enlaces, no botones: idioma por sesión hasta F-1) */
html.demo-sala .idioma a{display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:44px; opacity:.85; text-decoration:none}
html.demo-sala .idioma a[aria-current="true"]{opacity:1; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px}
html.demo-sala .menu-m .idioma a{min-width:44px; padding:0 6px}
html.demo-sala .menu-m:not([hidden]){display:flex}
/* canales de contacto */
html.demo-sala .canales{margin:0; border-top:1.5px solid currentColor}
html.demo-sala .canales div{display:grid; grid-template-columns:7.5em 1fr; gap:12px; align-items:baseline; padding:16px 0; border-bottom:1px solid color-mix(in srgb, currentColor 30%, transparent)}
html.demo-sala .canales dt{font:600 11px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase}
html.demo-sala .canales dd{margin:0; display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline}
html.demo-sala .canales .dato{font:300 22px/1.2 var(--serif); font-family:var(--serif)!important; text-decoration:none}
html.demo-sala .canales a.dato[href^="http"]{text-decoration:underline; text-underline-offset:4px}
html.demo-sala .mini{font:600 10.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; min-height:32px; display:inline-flex; align-items:center}
html.demo-sala .asunto-obra{display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; margin:18px 0 0}
html.demo-sala .asunto-obra b{font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase}
html.demo-sala .asunto-obra em{font:300 italic 22px/1.2 var(--serif); font-family:var(--serif)!important}
html.demo-sala .asunto-obra .quitar{font:600 10.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase}
html.demo-sala .enviado .h2{margin-bottom:12px}
/* ficha con dirección propia (Disponible): la misma ficha del visor, en la página */
html.demo-sala .ficha.pagina{position:relative; inset:auto; z-index:1; min-height:100svh; background:none}
html.demo-sala .ficha.pagina .f-escena{min-height:60svh}
html.demo-sala .ficha[hidden]{display:none}
/* sin JS / movimiento reducido: todo visible y quieto */
html.demo-sala:not(.js) .antesala .escena{position:relative; height:auto; overflow:visible}
html.demo-sala:not(.js) .antesala .parada{position:relative; height:100svh; min-height:560px}
html.demo-sala:not(.js) .antesala .cartela-p,html.demo-sala:not(.js) .antesala .paso,html.demo-sala:not(.js) .antesala .baja{display:none}
html.demo-sala:not(.js) .parada[data-pared]{background:var(--pw,transparent)}
html.demo-sala:not(.js) .pasos .num{color:currentColor}
html.demo-sala .cartela-n{display:none}
html.demo-sala:not(.js) .cartela-n{display:block; position:absolute; left:var(--gl); bottom:30px}
/* Obra: abanico + grilla server-side (los contadores los recalcula el JS) */
html.demo-sala .grilla .carta[hidden]{display:none}
html.demo-sala .pila img{background:color-mix(in srgb, currentColor 8%, transparent)}
/* Exhibiciones: el año lo toma la sala (data-pared por año = el color de su primera obra) */
html.demo-sala .muestra .rot{margin-bottom:10px}
html.demo-sala .marco-vacio{display:grid; place-items:center; aspect-ratio:4/5; border:1.5px dashed currentColor; padding:20px; font:300 italic 20px/1.3 var(--serif); font-family:var(--serif)!important; text-align:center; opacity:.6}
/* Procesos: nota (blog/show) */
html.demo-sala .nota-v .texto :is(p,li){font-size:16px; line-height:1.7}
html.demo-sala .nota-v .texto img{max-width:100%; height:auto}
/* páginas de módulo que la sala no reescribe (faqs, búsquedas): legibles sobre la pared */
html.demo-sala .main .page-header-sala{padding:calc(var(--hh) + 56px) var(--gr) 30px var(--gl)}
html.demo-sala .main .card,html.demo-sala .main .accordion-item{background:transparent; color:inherit; border-color:color-mix(in srgb, currentColor 30%, transparent)}
html.demo-sala .main .accordion-button{background:transparent; color:inherit; font:300 22px/1.3 var(--serif); font-family:var(--serif)!important}
html.demo-sala .main .pagination .page-link{background:transparent; color:inherit; border-color:currentColor}
/* ficha con dirección propia: miniaturas como enlaces (sin JS abren la foto) */
html.demo-sala .f-minis a{display:block; width:52px; height:62px; padding:3px; border:1.5px solid transparent; opacity:.6}
html.demo-sala .f-minis a[aria-current="true"]{border-color:currentColor; opacity:1}
html.demo-sala .f-minis a img{width:100%; height:100%; object-fit:contain}
html.demo-sala .materias{line-height:1.15; row-gap:.15em}
@media (max-width:820px){html.demo-sala .nav-obra .serie-a[aria-current] .serie-n,html.demo-sala .nav-obra .serie-a[aria-current] .serie-n *{color:var(--wall)!important}}
html.demo-sala .hoja h3{font-family:var(--sans)!important}
html.demo-sala #contenido:focus{outline:none}
/* Disponible · tipo sin piezas: se muestra atenuado con 0 (canvas), sin abrir ni filtrar */
html.demo-sala .serie.vacia .serie-a{opacity:.45; cursor:default}
html.demo-sala .serie.vacia .pila{border:1px dashed currentColor; opacity:.5}