/* Type. Mona Sans carries the page: GitHub drew it for people who build software, and its wide cut is the opposite of
   the condensed voice this page replaces, with plain zeros for prices. Monaspace Neon sets the code under the lens:
   same house, made for code, so the page and what runs beneath it share one hand. */
@font-face{font-family:"Mona Sans";src:url(../fonts/mona-sans-latin.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Monaspace Neon";src:url(../fonts/monaspace-neon-latin-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --tinta:#f4f0ec;
  --tenue:rgba(244,240,236,.66);
  --linea:rgba(244,240,236,.13);
  --rojo:#ff2d55;
  --fondo:#060405;
  --hoja:rgba(9,7,8,.9);
  --m:clamp(20px,4.2vw,64px);
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{background:var(--fondo);color:var(--tinta);-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{font-family:"Mona Sans",system-ui,sans-serif;font-size:16px;line-height:1.5;font-stretch:100%;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The stage: the film never leaves; everything else passes over it. */
.escenario{position:fixed;inset:0;z-index:0;background:var(--fondo);overflow:hidden;height:100vh;height:100lvh}
.escenario video,.escenario canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.escenario video{object-fit:cover;object-position:58% 50%;opacity:0}
.capas{position:absolute;inset:0;overflow:hidden;contain:strict}
.escenario video.peli{inset:auto;left:0;top:0;width:100%;height:100%;object-position:0% 15%;transform-origin:18% 22%;transition:opacity .55s linear;will-change:opacity,transform}
.retrato .escenario video.peli{object-position:50% 50%;transform-origin:50% 40%}
.escenario video.peli.ver{opacity:1}
.escenario video.peli.doble{object-fit:fill}
#pelicula2{visibility:hidden}
.escenario canvas{opacity:0;transition:opacity .5s linear}
.gl-listo .escenario canvas{opacity:1}
.sin-gl .escenario video{opacity:1}
.sin-gl .escenario canvas{display:none}
@media (max-aspect-ratio:1/1) and (max-width:900px){
  .escenario video{object-position:50% 50%}
}

header,main,footer{position:relative;z-index:1}

/* The plain-words reading that travels with the lens: a small sheet, never a label on the footage. */
.lectura{position:fixed;left:0;top:0;z-index:2;max-width:min(21em,84vw);padding:.5em .85em;border-radius:12px;background:var(--hoja);font-size:.92rem;line-height:1.34;opacity:0;pointer-events:none;will-change:transform;transition:opacity .22s linear}
.lectura.ver{opacity:1}
.sin-gl .portada{background:linear-gradient(20deg,rgba(6,4,5,.86),rgba(6,4,5,0) 66%)}

.cabecera{position:fixed;top:0;left:0;right:0;z-index:3;transition:background .25s,color .2s;display:flex;align-items:center;justify-content:space-between;padding:clamp(16px,2.6vh,26px) var(--m)}
.marca{display:flex;align-items:center;gap:.6em;text-decoration:none;font-weight:600;font-stretch:112%;font-size:1.06rem;letter-spacing:-.005em}
.marca img{display:block;width:30px;height:auto}
.cabecera nav{display:flex;gap:clamp(18px,2.4vw,34px)}
.cabecera nav a{text-decoration:none;font-weight:500;font-size:.98rem;padding:.4em 0;border-bottom:1px solid transparent}
.cabecera nav a:hover{border-bottom-color:currentColor}

/* The scenes: one big line each, held on stage while the film and the lens work behind it. */
.escena{position:relative}

/* The door: the logo made of the catalog, on the dark stage, as a sheet that slides over everything. */
.puerta{position:relative;z-index:2;height:100vh;height:100svh;min-height:540px;background:#060405;overflow:hidden}
.puerta canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.puerta-t{position:fixed;z-index:1;opacity:0;left:var(--m);bottom:clamp(30px,6vh,70px);width:min(25vw,23rem);pointer-events:none}
.puerta-t h2{font-size:clamp(1.7rem,2.9vw,3.2rem)}
.puerta-t p{margin-top:.7em;color:var(--tenue);font-size:clamp(1rem,1.2vw,1.16rem);max-width:30em}
.puerta-t .accion{margin-top:1.1em}
.puerta-t.viva .accion{pointer-events:auto}
.tip{position:fixed;left:0;top:0;z-index:5;width:min(19rem,78vw);padding:.7em .9em;border-radius:12px;background:#17110f;border:1px solid rgba(244,240,236,.16);font-size:.9rem;line-height:1.3;pointer-events:none}
.tip span,.tip b,.tip a{display:block}
.tip #tipC{color:var(--tenue);font-size:.82rem}
.tip b{font-weight:560;margin:.15em 0 .3em}
.tip .tip-p strong{font-weight:600}
.tip .tip-p span{display:inline;color:var(--tenue)}
.tip a{margin-top:.4em;color:#ff6d88;display:none}
.tactil .tip{pointer-events:auto;left:0;right:0;margin:0 auto}
.tactil .tip a{display:block}

/* First screen */
.portada{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:96px var(--m) clamp(36px,8vh,84px)}
h1{font-size:clamp(2.75rem,6.25vw,6.9rem);line-height:1.01;font-weight:540;font-stretch:112.5%;letter-spacing:-.024em}
h1 .l{display:block}
.sub{font-size:clamp(1.05rem,1.42vw,1.36rem);line-height:1.42;max-width:33em;margin-top:1.05em;color:rgba(248,244,240,.97);font-weight:470}
.portada h2{font-size:clamp(2.75rem,6.25vw,6.9rem);line-height:1.01;font-weight:540;font-stretch:112.5%;letter-spacing:-.024em}
.portada h2 .l{display:block}
.tipo-gl .portada h2{color:transparent}

.accion{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.5em;border:0;border-radius:999px;background:var(--rojo);color:#17040a;font:inherit;font-weight:640;font-stretch:106%;font-size:1.04rem;text-decoration:none;cursor:pointer;transition:transform .14s ease,background .14s ease}
.accion:hover{background:#ff5273}
.accion:active{transform:scale(.97)}
.accion:focus-visible,.elige input:focus-visible+span,.opciones button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.portada .accion{margin-top:clamp(20px,3.4vh,34px)}
.accion-suave{background:var(--tinta)}
.accion-suave:hover{background:#fff}

/* Builder: two sheets over the film and an opening between them where the lens works. */
.armar{padding:clamp(120px,26vh,260px) var(--m) clamp(28px,6vh,64px)}
.rejilla{scroll-margin-top:104px;display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);grid-template-rows:auto 1fr;column-gap:clamp(20px,2.4vw,40px);max-width:1640px;margin:0 auto}
.hoja{background:var(--hoja);padding:clamp(22px,2.6vw,38px);grid-column:1}
.hoja-a{grid-row:1;border-radius:20px 20px 0 0;padding-bottom:clamp(14px,1.4vw,22px)}
.hoja-b{grid-row:2;border-radius:0 0 20px 20px;padding-top:0}
.rejilla::before{content:"";grid-column:1;grid-row:1/3;background:var(--hoja);border-radius:20px}
.hoja-a,.hoja-b{background:none}
.ventana{grid-column:2;grid-row:1/3;position:sticky;top:6vh;height:88vh;align-self:start;display:flex;align-items:flex-end;pointer-events:none}
.ojo p{max-width:27em;padding:.7em 1em;border-radius:14px;background:var(--hoja);font-size:.94rem;line-height:1.4;color:rgba(244,240,236,.86)}

h2{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.04;font-weight:540;font-stretch:112.5%;letter-spacing:-.022em}
.intro{margin-top:.75em;max-width:37em;color:var(--tenue);font-size:clamp(1rem,1.1vw,1.08rem)}

.ajustes{display:flex;flex-wrap:wrap;gap:14px clamp(20px,3vw,44px);margin-top:clamp(18px,2.4vh,26px)}
.elige{border:0;padding:0;min-width:0}
.elige legend{padding:0;margin-bottom:.4em;font-size:.88rem;color:var(--tenue)}
.elige{display:flex;flex-wrap:wrap;gap:4px}
.elige label{position:relative;cursor:pointer}
.elige input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.elige span{display:block;padding:.5em 1em;border-radius:999px;border:1px solid var(--linea);font-weight:520;font-size:.98rem;transition:background .14s ease,color .14s ease,border-color .14s ease}
.elige label:hover span{border-color:rgba(244,240,236,.4)}
.elige input:checked+span{background:var(--tinta);color:#120b0d;border-color:var(--tinta)}

.presupuesto{display:grid;grid-template-columns:1fr auto;align-items:baseline;margin-top:clamp(16px,2.2vh,24px)}
.presupuesto label{font-size:.88rem;color:var(--tenue)}
.presupuesto output{font-size:clamp(1.9rem,3vw,2.9rem);line-height:1.1;font-weight:520;font-stretch:112.5%;letter-spacing:-.02em}
.presupuesto input{grid-column:1/3;width:100%;height:40px;margin:2px 0 0;background:none;-webkit-appearance:none;appearance:none;cursor:ew-resize;--p:18%}
.presupuesto input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--rojo) var(--p),rgba(244,240,236,.2) var(--p))}
.presupuesto input::-moz-range-track{height:4px;border-radius:2px;background:rgba(244,240,236,.2)}
.presupuesto input::-moz-range-progress{height:4px;border-radius:2px;background:var(--rojo)}
.presupuesto input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:var(--tinta);border:0;box-shadow:0 0 0 5px rgba(255,45,85,.28)}
.presupuesto input::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--tinta);border:0;box-shadow:0 0 0 5px rgba(255,45,85,.28)}
.presupuesto input:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}

.vivo{display:none}

.opciones{display:flex;flex-wrap:wrap;gap:0 clamp(16px,2vw,30px);border-bottom:1px solid var(--linea)}
.opciones button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:.55em 0 .6em;color:var(--tenue);font:inherit;font-weight:520;font-size:.98rem;text-align:left;cursor:pointer;transition:color .14s ease}
.opciones button b{display:block;font-weight:520;font-size:.92rem;color:inherit;opacity:.8}
.opciones button:hover{color:var(--tinta)}
.opciones button[aria-pressed=true]{color:var(--tinta);border-bottom-color:var(--rojo)}

.porque{min-height:1.5em;margin-top:.7em;color:var(--tenue);font-size:.96rem}

.filas{list-style:none;padding:0;margin-top:.45em}
.fila{display:grid;grid-template-columns:8.2em minmax(0,1fr) 6.9em 6.4em;gap:0 12px;align-items:baseline;padding:.3em 0;border-top:1px solid var(--linea);font-size:.96rem;line-height:1.28}
.fila:first-child{border-top:0}
.fila .t{color:var(--tenue);font-size:.88rem}
.fila .n{min-width:0;font-weight:520}
.fila .n small{display:block;font-weight:420;font-size:.84rem;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .e{color:var(--tenue);font-size:.86rem}
.fila .e.hoy{color:var(--tinta)}
.fila .p{text-align:right;font-weight:520}
.fila.nueva .n,.fila.nueva .p{animation:entra .22s ease-out}
@keyframes entra{from{opacity:.25}to{opacity:1}}

.aviso{padding:1em 0 .4em}
.aviso p{font-size:1.08rem;line-height:1.42;max-width:38em}
.aviso .accion{margin-top:.9em}

.cierre{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;margin-top:.5em;padding-top:.8em;border-top:1px solid rgba(244,240,236,.32)}
.cierre{position:sticky;bottom:0;background:#0a0708;padding-bottom:12px}
.total span{display:block;font-size:.9rem;color:var(--tenue)}
.total strong{display:block;font-size:clamp(1.9rem,2.9vw,2.8rem);line-height:1.1;font-weight:540;font-stretch:112.5%;letter-spacing:-.02em}
.revisado{margin-top:.8em;font-size:.88rem;color:var(--tenue);line-height:1.4}
.nota{margin-top:.3em;font-size:.84rem;color:var(--tenue)}

.pie{padding:0 var(--m) clamp(22px,4vh,40px);max-width:1768px;margin:0 auto}
.pie p{font-size:.9rem;color:rgba(244,240,236,.82);text-shadow:0 1px 12px rgba(0,0,0,.9)}

/* Narrow: the opening sits between the sheets, the totals stay beside the slider. */
@media (max-width:1079px){
  .armar{padding-left:0;padding-right:0;padding-top:30vh}
  .rejilla{display:block}
  .rejilla::before{display:none}
  .hoja-a,.hoja-b{background:var(--hoja)}
  .hoja{border-radius:0;padding-left:var(--m);padding-right:var(--m)}
  .hoja-a{border-radius:22px 22px 0 0;padding-bottom:18px}
  .hoja-b{border-radius:0 0 22px 22px;padding-top:6px}
  .ventana{position:relative;top:auto;height:auto;display:block;padding:16px var(--m) 12px}
  .ojo{height:min(76vw,330px)}
  .ojo p{font-size:.86rem;max-width:30em}
  .vivo{display:block;margin-top:6px;font-size:1rem;line-height:1.3}
  .vivo strong{font-size:1.28rem;font-weight:560;display:block;font-stretch:112.5%}
  .vivo span{color:var(--tenue);font-size:.9rem}
  .pie{padding-top:22px}
  .puerta-t{left:var(--m);right:var(--m);width:auto;bottom:max(20px,3vh)}
  .solo-ancho{display:none}
  .cierre{position:static;background:none}
  .ojo p{padding:.5em .8em}
}
@media (max-width:640px){
  .portada{padding-bottom:max(30px,6vh)}
  h1,.portada h2{font-size:11.7vw}
  .sub{font-size:1.04rem}
  .accion{width:100%}
  .portada .accion{width:auto}
  .fila{grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:.55em 0}
  .fila .t{grid-column:1/3}
  .fila .n{grid-column:1;grid-row:2}
  .fila .p{grid-column:2;grid-row:2}
  .fila .e{grid-column:1/3;grid-row:3}
  .fila .n small{white-space:normal}
  .opciones{gap:0 14px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .opciones button{flex:none}
  .elige span{padding:.5em .85em;font-size:.94rem}
}

/* The journey */
#lim{overflow:clip}
#pista{position:relative;padding:190vh 0 255vh}
.acto{position:relative;height:120vh;pointer-events:none}
/* On a computer the word and its line are baked into the film; this text is there for readers and search */
.acto-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.retrato .acto-t{position:sticky;width:auto;height:auto;overflow:visible;clip-path:none;top:0;padding:calc(clamp(62px,8.4vh,96px) + 6px) var(--m) 0}
.acto h2{width:max-content;font-size:17vw;font-weight:800;font-stretch:112.5%;letter-spacing:-.03em;line-height:1;color:#fff;margin-left:-.04em}
.acto p{margin-top:.28em;max-width:24em;font-size:clamp(21px,3.6vw,64px);line-height:1.14;font-weight:560;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.7),0 0 6px rgba(0,0,0,.45)}
@media (max-width:860px){.acto h2{font-stretch:100%}}
.portada-1{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:96px var(--m) clamp(36px,8vh,84px);pointer-events:none;opacity:0}
.portada-1 h1{max-width:11em;font-size:clamp(2.5rem,5vw,5.8rem);text-shadow:0 2px 30px rgba(0,0,0,.75)}
.portada-1 .sub{max-width:29em;text-shadow:0 1px 16px rgba(0,0,0,.9)}
.cabecera.sobre{background:#060405;transition:color .2s;box-shadow:0 1px 0 rgba(244,240,236,.14)}
.sin-viaje #pista{padding:0}
.sin-viaje .acto{height:auto}
.sin-viaje .portada-1,.sin-viaje .puerta-t{position:static;opacity:1;height:auto}
/* Shelves beside the sheet, the lens below them */
@media (min-width:1080px){
  .ventana{top:max(6vh,88px);height:calc(100vh - max(6vh,88px) - 12px);height:calc(100svh - max(6vh,88px) - 12px);flex-direction:column;align-items:stretch}
}
.estantes{flex:none;pointer-events:auto}
.est-emb{font-size:1.02rem;line-height:1.3;color:var(--tinta);text-shadow:0 1px 10px #000;margin:0 0 6px}
.est-emb b{font-weight:600}
.leyenda{display:flex;flex-wrap:wrap;gap:2px 16px;align-items:center;font-size:.86rem;color:rgba(244,240,236,.82);margin:0}
.leyenda i{display:inline-block;width:10px;height:11.5px;margin-right:5px;vertical-align:-1px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.c-r{background:var(--rojo)}.c-g{background:#9a9da6}.c-p{background:#3a3c42}
.eje{position:relative;height:18px;margin-top:5px;font-size:.8rem;color:rgba(244,240,236,.78)}
.eje span{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap}
.est-filas{list-style:none;padding:0;margin:12px 0 0}
.est{position:relative;height:clamp(40px,5.7vh,56px)}
.est:nth-child(5){height:clamp(62px,9vh,88px)}
.est-t{position:absolute;left:0;top:0;z-index:1;padding:0 .35em 0 0;font-size:.86rem;line-height:1.25;font-weight:520;color:var(--tinta);background:rgba(6,4,5,.8);border-radius:0 0 4px 0}
.anaquel{position:absolute;inset:0;border-bottom:1px solid rgba(244,240,236,.34)}
.ojo{flex:1 1 auto;min-height:0;display:flex;align-items:flex-end}
/* On a phone the head of the shelves is a solid strip: what falls passes behind it */
@media (max-width:1079px){
  .est-emb,.leyenda,.eje{background:#060405}
  .est-emb{margin:0;padding:6px 0 4px}
  .leyenda{padding-bottom:4px}
  .eje{margin-top:0;padding-top:4px;height:22px}
  .est-filas{margin-top:8px}
}
/* The close for company buyers */
.armar{margin-top:35vh}
.empresa{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .8em;margin-bottom:clamp(14px,2.4vh,22px)}
.empresa p{font-size:clamp(1.2rem,1.7vw,1.6rem);font-weight:520;font-stretch:112.5%;letter-spacing:-.012em;color:var(--tinta);text-shadow:0 1px 12px rgba(0,0,0,.9)}
.empresa a{font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:560;color:#ff6d88;text-underline-offset:.2em}
.empresa a:hover{color:#ff93aa}
.ext{display:inline-block;margin-left:.22em;font-size:.86em}
.cabecera nav a{white-space:nowrap}
.marca{white-space:nowrap}
/* The opening lens: risks pinned to the buildings */
.riesgos{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0}
.r-p{position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:var(--rojo);box-shadow:0 0 0 2px rgba(255,45,85,.32);will-change:transform;transition:opacity .16s linear}
.r-t{position:absolute;left:0;top:0;white-space:nowrap;font-size:12px;line-height:1;font-weight:520;color:#fff;padding:3px 7px;border-radius:3px;background:rgba(14,4,7,.8);will-change:transform;transition:opacity .16s linear}
html.cerrado,html.cerrado body{touch-action:pan-up}
.nota-lente{position:fixed;left:0;top:0;z-index:1;margin:0;font-size:12.5px;color:rgba(244,240,236,.86);text-shadow:0 1px 8px #000;white-space:nowrap;pointer-events:none;opacity:0;will-change:transform}
@media (max-width:640px){
  .portada-1{padding-bottom:max(30px,6vh)}
  .portada-1 h1{font-size:10.4vw}
}