/* Madrid Terror · hoja de las fichas de experiencia (molde de Paranormal, 19-sep). Cada ficha pone sus imágenes y colores con variables en : --foto, --foto-pos, --figura, --figura-pos, --color-tit y --halo-tit. Lo genera proyecto/herramientas/generar-fichas.py. */ :root{--fondo:#0A0807;--fondo2:#131010;--texto:#E9E1D3;--suave:rgba(233,225,211,.66);--linea:rgba(233,225,211,.14); --boton:#8E1016;--acento:#C0272F;--acento-txt:#E8434B;--cian:#bff3ec;--tit:"Bebas Neue",Impact,sans-serif;--txt:"Archivo",system-ui,sans-serif;--dat:"Oswald",ui-monospace,monospace;--curva:cubic-bezier(.2,.8,.2,1)} *{box-sizing:border-box;margin:0} html{scroll-behavior:smooth} /* Si se llega desde la tele del hero, la página se enciende como un tubo: raya, y se abre. */ body.encendiendo > *:not(.grano){animation:encenderTubo .42s cubic-bezier(.1,.7,.2,1) both;transform-origin:50% 50%} @keyframes encenderTubo{0%{transform:scaleY(.006) scaleX(.3);filter:brightness(6)}40%{transform:scaleY(.006) scaleX(1);filter:brightness(3)}100%{transform:none;filter:none}} body.encendiendo{background:#000} body{touch-action:manipulation;-webkit-tap-highlight-color:transparent} [id]{scroll-margin-top:24px} h1,h2,h3{text-wrap:balance} .saltar{position:absolute;left:8px;top:-60px;z-index:100;background:var(--acento);color:#fff;padding:10px 14px;font:600 14px var(--txt);text-decoration:none} .saltar:focus{top:8px} body{background:var(--fondo);color:var(--texto);font:17px/1.6 var(--txt);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit} img,video{display:block;max-width:100%} .ancho{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3.2vw,44px)} .dat{font-family:var(--dat);text-transform:uppercase;letter-spacing:.08em} .ac{color:var(--acento-txt)} .grano{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");animation:grano .6s steps(5) infinite} @keyframes grano{20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-1%,3%)}80%{transform:translate(3%,1%)}} h2.tit{font:400 clamp(44px,6vw,92px)/.9 var(--tit);text-transform:uppercase;text-shadow:0 0 22px rgba(192,39,47,.4)} .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:700 13px/1 var(--txt);letter-spacing:.16em;text-transform:uppercase;padding:15px 26px;border-radius:2px;border:1.5px solid rgba(233,225,211,.45);color:var(--texto);text-decoration:none;cursor:var(--cur-p);background:none;transition:border-color .25s,background .25s} .btn:hover{border-color:var(--texto);background:rgba(233,225,211,.06)} /* Botón de acción: un sello de tinta roja, torcido y con el borde comido. Al pasar se estampa (se llena de tinta) y al pulsar golpea. El mismo de la portada. */ .btn.fuerte{background:none;border:3px solid var(--acento);border-radius:4px;color:var(--acento-txt);font:400 28px/1 var(--tit);letter-spacing:.1em;padding:10px 24px 7px;text-shadow:none;box-shadow:none; transform:rotate(-4deg);filter:url(#tinta);overflow:visible;transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .18s,color .18s} .btn.fuerte::before,.btn.fuerte::after{display:none} .btn.fuerte:hover{background:var(--acento);border-color:var(--acento-txt);color:#0A0807;transform:rotate(-4deg) scale(.94);filter:url(#tinta);box-shadow:none} .btn.fuerte:active{transform:rotate(-4deg) scale(.88);box-shadow:none} :focus-visible{outline:2px solid var(--acento);outline-offset:3px} /* ---------- Hero de la ficha: su cartel partido y el título que se corrompe ---------- */ .cabeza{position:relative;min-height:100svh;display:grid;grid-template-columns:1.15fr .85fr;background:#040505;overflow:hidden} .cabeza .foto{position:relative;overflow:hidden} .cabeza .foto .img{position:absolute;inset:-4%;background:var(--foto) var(--foto-pos,50% 50%)/cover;animation:acerca 26s ease-in-out infinite alternate} @keyframes acerca{to{transform:scale(1.08) translate(1.5%,-1%)}} /* el ojo rojo de la cabra respira */ .cabeza .ojo{position:absolute;left:var(--ojo-x,26.5%);top:var(--ojo-y,63.7%);width:var(--ojo-d,170px);height:var(--ojo-d,170px);transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(circle,rgba(255,40,40,.55) 0,rgba(255,20,20,.18) 30%,transparent 65%);mix-blend-mode:screen;animation:latido 3.4s ease-in-out infinite} @keyframes latido{0%,100%{opacity:.25;transform:translate(-50%,-50%) scale(.8)}45%{opacity:.9;transform:translate(-50%,-50%) scale(1.1)}55%{opacity:.5}} .cabeza .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,#040505),linear-gradient(180deg,rgba(4,5,5,.7),transparent 22%,transparent 80%,#040505)} /* Grano extra solo sobre la foto de una ficha (Fran, 27-sep): la del cartel se ve muy nitida, casi de render. El .grano de toda la pagina es sutil a proposito; este va encima, solo de la foto, con la misma textura para que no desentone. Ademas un desenfoque leve y color mas apagado: quitar nitidez de verdad, no solo textura por encima ("menos nitido, mas tetrico", Fran). */ .cabeza .foto.foto-grano .img{filter:blur(1.6px) contrast(1.12) saturate(.78) brightness(.88)} .cabeza .foto.foto-grano::before{content:"";position:absolute;inset:0;z-index:1;opacity:.55;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grano .6s steps(5) infinite} /* ---------- La historia en video (Paranormal) ---------- Sustituye al pasillo de scroll. El navegador NO deja arrancar un video con sonido sin que el visitante toque algo, asi que empieza mudo al entrar en pantalla y el boton lo enciende. */ .cinta{position:relative;background:#040505} /* A pantalla completa: sin bordes negros alrededor. El clip es 16:9 y la ventana casi nunca lo es, asi que cover recorta lo que sobre. El pasillo esta centrado y aguanta el recorte. */ .cinta-marco{position:relative;width:100%;height:100svh;overflow:hidden;background:#000} .cinta-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .cinta-marco::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,#040505 0,#040505 2%,rgba(4,5,5,.55) 9%,transparent 22%,transparent 60%,rgba(0,0,0,.6) 84%,#000 98%,#000)} .cinta-son{position:absolute;right:clamp(18px,2.4vw,34px);bottom:clamp(32px,4vw,56px);z-index:2; display:flex;align-items:center;gap:10px;min-height:44px;padding:11px 16px; font:600 12px var(--dat);letter-spacing:.16em;text-transform:uppercase;color:var(--texto); background:rgba(4,5,5,.62);border:1px solid rgba(233,225,211,.42);border-radius:2px; cursor:var(--cur-p);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s,background .2s} .cinta-son:hover{border-color:var(--texto);background:rgba(4,5,5,.8)} .cinta-son[aria-pressed=true]{border-color:var(--acento-txt);color:var(--acento-txt)} /* La marca del altavoz: dos barras que crecen. Con sonido salen las tres. */ .cinta-alta{display:flex;align-items:flex-end;gap:2px;height:13px} .cinta-alta::before,.cinta-alta::after{content:"";width:3px;background:currentColor} .cinta-alta::before{height:6px} .cinta-alta::after{height:10px} .cinta-son[aria-pressed=true] .cinta-alta::before{height:9px} .cinta-son[aria-pressed=true] .cinta-alta::after{height:13px} @media (max-width:900px){ /* En el movil no puede ir a pantalla completa: el clip es 16:9 y la ventana 9:19,5, asi que cover se comeria 1110 px de los 1500 y solo quedaria el 26% del plano, un trozo de pared sin pasillo ni lamparas. A 4:5 se ve el 45% y el pasillo se lee. Medido: 4:5 -> 45%, 3:4 -> 42%, 2:3 -> 38%, y en 2:3 ya se pierde el punto de fuga. */ .cinta-marco{height:auto;aspect-ratio:4/5} .cinta-son{right:14px;bottom:20px;padding:10px 13px;font-size:11px;letter-spacing:.12em} } .cabeza .txt{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:140px clamp(20px,4vw,64px) 60px clamp(10px,2vw,30px)} .glitch{position:relative;font:400 clamp(64px,7.4vw,128px)/.86 var(--tit);text-transform:uppercase;color:var(--color-tit,var(--cian));text-shadow:0 0 28px var(--halo-tit,rgba(120,230,220,.35));margin:14px 0 6px} .glitch::before,.glitch::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;text-shadow:none} .glitch::before{color:#ff2850;mix-blend-mode:screen;animation:corte 3.4s infinite steps(1)} .glitch::after{color:#28dcff;mix-blend-mode:screen;animation:corte 3.4s .12s infinite steps(1) reverse} @keyframes corte{0%,86%,100%{clip-path:inset(0 0 100% 0);transform:none}87%{clip-path:inset(12% 0 60% 0);transform:translateX(-6px)}89%{clip-path:inset(55% 0 20% 0);transform:translateX(7px)}91%{clip-path:inset(30% 0 45% 0);transform:translateX(-3px)}} /* Los cortes los manda el texto (un
por idea), no el ancho de la caja: con 30ch las cinco frases se partian donde les cabia. Con 34ch ninguna se parte sola y el remate en rojo siempre empieza linea. */ .cita{font:400 clamp(21px,2vw,29px)/1.12 var(--tit);letter-spacing:.02em;text-transform:uppercase;max-width:42ch;margin:20px 0 22px;color:var(--texto)} .cita b{color:var(--acento-txt);font-weight:400;text-shadow:0 0 26px rgba(232,67,75,.35)} /* Las caracteristicas de la sala en la portada. Misma gramatica que el bloque de cifras de mas abajo: el dato en Bebas y su etiqueta en versalitas, separados por una linea fina. */ .marcas{display:grid;grid-auto-flow:column;justify-content:start;margin:6px 0 16px} .marcas div{display:grid;gap:5px;align-content:start;padding-right:clamp(11px,1.3vw,20px)} .marcas div + div{padding-left:clamp(11px,1.3vw,20px);border-left:1px solid var(--linea)} .marcas div:last-child{padding-right:0} .marcas b{font:400 clamp(26px,2.3vw,36px)/.82 var(--tit);letter-spacing:.005em;color:var(--texto);white-space:nowrap} .marcas span{font:500 clamp(9px,.68vw,11px)/1.2 var(--dat);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)} .marcas-ac{display:flex;flex-wrap:wrap;gap:4px clamp(12px,1.2vw,18px);align-items:baseline; font:500 clamp(11px,.9vw,13px) var(--dat);letter-spacing:.16em;text-transform:uppercase;margin:0 0 26px} .marcas-ac i,.marcas-ac em{font-style:normal} .marcas-ac i{color:var(--acento-txt)} .marcas-ac em{color:var(--suave)} .acciones{display:flex;flex-wrap:wrap;gap:12px} /* Premio del hero (Fran, 27-sep): solo en Horror Club, justo debajo de los botones. Mismo dorado que las estrellas de las resenas de la portada, para que se lea como un sello, no como un dato mas. */ .premio-hero{display:flex;align-items:center;gap:10px;margin-top:clamp(20px,2.4vw,30px);font:500 14px var(--dat);letter-spacing:.1em;text-transform:uppercase;color:#d8b24a} .premio-hero svg{flex:none} @media (max-width:900px){.premio-hero{justify-content:center;text-align:center}} /* «En colaboracion con» el Museo de Cera, bajo los botones del hero (Fran, 26-sep). Solo en escritorio: en movil el hero cabe en una pantalla y no hay sitio. */ .colab{display:flex;align-items:center;gap:18px;margin-top:clamp(44px,4.4vw,64px);font:500 15px var(--dat);letter-spacing:.18em;text-transform:uppercase;color:var(--suave)} .colab img{width:clamp(84px,7vw,104px);height:auto;border-radius:4px} @media (max-width:900px){.colab{display:none}} .bajar{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);font:14px var(--dat);letter-spacing:.2em;text-transform:uppercase;color:var(--suave);text-decoration:none;animation:flota 2.4s ease-in-out infinite} @keyframes flota{50%{transform:translate(-50%,6px)}} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} ::selection{background:var(--acento);color:#fff} html{scrollbar-color:#3a2a28 #070505} /* ---------- El pasillo: bajas y avanzas por la sala real; el texto va como subtítulos ---------- */ .pasillo{background:#000;position:relative} .pasillo-pista{height:640vh;position:relative} .pasillo-fijo{position:sticky;top:0;height:100svh;overflow:hidden} .pasillo-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.08) saturate(1.05)} .pasillo-sombra{position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 40%,rgba(0,0,0,.78) 100%),linear-gradient(180deg,rgba(0,0,0,.55),transparent 18%,transparent 62%,rgba(0,0,0,.85))} .tc{position:absolute;top:clamp(92px,12vh,120px);left:clamp(16px,3.2vw,44px);right:clamp(16px,3.2vw,44px);display:flex;justify-content:space-between; font:500 13px var(--dat);letter-spacing:.18em;text-transform:uppercase;color:rgba(233,225,211,.62);font-variant-numeric:tabular-nums} .subs{position:absolute;left:0;right:0;bottom:clamp(64px,13vh,130px);display:grid;justify-items:center;padding:0 20px} .sub{grid-area:1/1;max-width:34ch;text-wrap:balance;text-align:center;font:600 clamp(20px,2.1vw,30px)/1.3 var(--txt);color:#F4EDE2; text-shadow:0 2px 3px rgba(0,0,0,.9),0 0 22px rgba(0,0,0,.8);opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity .45s var(--curva),transform .45s var(--curva),filter .45s var(--curva)} .sub.ver{opacity:1;transform:none;filter:none} .sub.cc{font:italic 400 clamp(16px,1.4vw,20px)/1.3 var(--txt);color:rgba(233,225,211,.7);letter-spacing:.04em} .sub.fin{font:400 clamp(22px,2.2vw,32px)/1.2 var(--txt);font-style:italic;color:#ffb3b3} .hora-lector{color:var(--acento-txt);font-weight:700} .pista-ayuda{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:500 12px var(--dat);letter-spacing:.24em;text-transform:uppercase;color:rgba(233,225,211,.5);transition:opacity .4s} .pasillo.andando .pista-ayuda{opacity:0} /* ---------- Cartel: el bloque de créditos de un póster de cine, con los datos de verdad ---------- */ /* ---------- Niveles: tres palabras; la elegida se enciende y la sala cambia con ella ---------- */ /* Fran, 26-sep: menos distancia entre el miedo y el calendario. Abajo del miedo y arriba del calendario habia 140+140 px en escritorio y 80+80 en movil: se quedan a la mitad. */ .niveles{position:relative;display:flex;align-items:center;padding:clamp(80px,10vw,140px) 0 clamp(44px,5.2vw,72px);overflow:hidden;background:#000;--c:#E8434B} .niveles[data-i="1"]{--c:#d9822b} .niveles[data-i="2"]{--c:#6fae78} /* Saw solo tiene Tensión e Iniciación: por posición le tocaban rojo y ámbar. Van con el color de su nombre, como en las demás salas: Tensión en ámbar e Iniciación en verde (Fran, 26-sep). */ .niveles[data-sala="saw"][data-i="0"]{--c:#d9822b} .niveles[data-sala="saw"][data-i="1"]{--c:#6fae78} /* La sala se enciende con el nivel (Fran, 25-sep): un foco del color del nivel sale de detras de la foto y tine el ambiente. Respira despacio, como el ojo de la cabra, y parpadea al cambiar. */ .niveles::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(180deg,#000,transparent 14%),radial-gradient(ellipse 58% 62% at 72% 58%,color-mix(in srgb,var(--c) 34%,transparent),transparent 70%), radial-gradient(ellipse 90% 40% at 60% 100%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%), linear-gradient(180deg,transparent,color-mix(in srgb,var(--c) 6%,transparent)); animation:luzRespira 7s ease-in-out infinite} @keyframes luzRespira{0%,100%{opacity:.62}50%{opacity:.95}} /* El foco del nivel llegaba encendido hasta el borde de abajo y ahi cortaba contra el #000 de .reserva (salto medido: 22). Se apaga en el ultimo quinto, por encima de la foto y del foco. */ .niveles::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,#000)} .niveles-foto{position:absolute;z-index:1;inset:0 0 0 34%;background:var(--figura) var(--figura-pos,60% 22%)/cover;-webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 30%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 80%,transparent);mask-composite:intersect;transition:filter 1.1s var(--curva),transform 1.6s var(--curva),opacity 1.1s} /* Clip por nivel (TRUECRIME): dentro de .niveles-foto, asi lleva la misma mascara y el mismo filtro que la foto. Solo se ve el del nivel elegido; el cambio es un fundido, no un corte. */ .niveles-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;transition:opacity .6s var(--curva)} .niveles-v.activa{opacity:1} /* Con clip vertical el lateral se estrecha (Fran, 26-sep: «amplialo un pelin menos»): a 66 % de ancho cover solo ensenaba el 53 % del alto del clip y la cara lo llenaba todo; a 50 % ensena el 70 %. */ @media (min-width:901px){.niveles-foto.con-video{inset:0 0 0 50%}} /* El clip es claro y entraba por la mascara desde el primer pixel (rgb 4,12,16 a +3 px de la costura): con video, los primeros 5 % quedan del todo apagados y la subida llega hasta el 24 %. */ .niveles-foto.con-video{-webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 88%,transparent),linear-gradient(180deg,transparent 5%,#000 24%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 88%,transparent),linear-gradient(180deg,transparent 5%,#000 24%,#000 80%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect} .niveles-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 55%)} .niveles[data-i="0"] .niveles-foto{filter:saturate(1.35) contrast(1.15) brightness(1);transform:scale(1.06)} .niveles[data-i="1"] .niveles-foto{filter:saturate(.8) contrast(1.05) brightness(.78) hue-rotate(-8deg);transform:scale(1.02)} .niveles[data-i="2"] .niveles-foto{filter:saturate(.45) contrast(1.05) brightness(.62);transform:none} .niveles-rej{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"cab cab" "sel det";gap:clamp(28px,4vw,56px) clamp(24px,4vw,64px);width:100%;align-items:start} .niveles-cab{grid-area:cab} .niveles-cab p{margin-top:18px;color:var(--suave);font-size:clamp(17px,1.3vw,19px);line-height:1.5} .selector{grid-area:sel;display:grid;gap:clamp(2px,.6vw,8px);justify-items:start} .op{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);background:none;border:0;padding:4px 0;cursor:var(--cur-p);color:var(--texto);text-align:left;opacity:.62;position:relative;padding-left:clamp(14px,1.4vw,20px);transition:opacity .5s var(--curva),transform .5s var(--curva)} .op::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;background:var(--c);transform:translateY(-50%);transition:height .45s var(--curva);box-shadow:0 0 12px color-mix(in srgb,var(--c) 70%,transparent)} .op[aria-checked="true"]::before{height:70%} .op::before{display:none} /* sin la raya lateral: el nivel elegido ya lo dicen su color y su sello (Fran, 26-sep) */ .op .sello{letter-spacing:-.02em} .op:hover{opacity:.8} .op[aria-checked="true"]{opacity:1} .op .nom{font:400 clamp(44px,6vw,104px)/.9 var(--tit);text-transform:uppercase;letter-spacing:.005em;white-space:nowrap} .op[aria-checked="true"] .nom{color:var(--c);text-shadow:0 0 34px color-mix(in srgb,var(--c) 45%,transparent)} .op .sello{flex:none;display:grid;place-items:center;width:clamp(42px,4vw,58px);aspect-ratio:1;border-radius:50%;border:2px solid currentColor;font:600 clamp(14px,1.3vw,18px)/1 var(--dat);letter-spacing:.02em} .op .sello svg{width:62%;height:62%;display:block} .op[aria-checked="true"] .sello{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 0 24px color-mix(in srgb,var(--c) 65%,transparent)} .op .nom,.op .sello{transition:color .5s,background .5s,border-color .5s,text-shadow .5s} .detalles{grid-area:det;align-self:end;max-width:46ch;padding-bottom:10px} .det .res{font:400 clamp(26px,2.3vw,36px)/1.05 var(--tit);text-transform:uppercase;letter-spacing:.01em;margin-bottom:18px} .det .quien{display:block;margin-top:8px;font:400 clamp(15px,1.15vw,17px)/1.4 var(--txt);text-transform:none;letter-spacing:0;color:var(--suave)} .det ul{list-style:none;padding:0;display:grid;gap:10px;color:var(--suave)} .det li{padding-left:22px;position:relative} .det li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:var(--c)} .det:not([hidden]){animation:detEntra .6s var(--curva) both} @keyframes detEntra{from{opacity:0;transform:translateY(10px);filter:blur(3px)}} /* ---------- Reservar ---------- */ .reserva{padding:clamp(44px,5.2vw,72px) 0 clamp(80px,10vw,140px);background:linear-gradient(180deg,#000,var(--fondo) 30%)} .reserva .ancho{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-areas:"tit tit" "cal letra";gap:clamp(20px,3vw,40px) clamp(28px,5vw,72px);align-items:start} .reserva h2{grid-area:tit}.reserva-cal{grid-area:cal}.letra{grid-area:letra;padding-top:28px} .calendario{border-top:1px solid var(--linea);padding-top:18px;min-height:606px;--checkout-gift-bg:transparent;--checkout-gift-text:var(--texto)} .calendario .cargando{display:grid;place-items:center;min-height:576px;color:var(--suave);font:15px var(--dat);letter-spacing:.1em;text-transform:uppercase} .calendario #ercalendar{--checkout-gift-bg:transparent!important;--checkout-gift-text:#E9E1D3!important} .calendario #ercalendar.checkout-calendar-style-modern .checkout-gift-button--modern{border:1.5px solid rgba(233,225,211,.45)!important;border-radius:2px!important;box-shadow:none!important} .calendario #ercalendar.checkout-calendar-style-modern .checkout-gift-button--modern:hover{border-color:var(--texto)!important;background:rgba(233,225,211,.06)!important} .letra h3{font:400 30px/1 var(--tit);text-transform:uppercase;letter-spacing:.02em;padding-bottom:14px;border-bottom:1px solid var(--linea)} .letra dl{display:grid} .letra dt{font:600 13px var(--dat);letter-spacing:.14em;text-transform:uppercase;color:var(--acento-txt);padding-top:16px} .letra dd{margin:4px 0 0;padding-bottom:16px;border-bottom:1px solid var(--linea);color:var(--suave);font-size:15px;line-height:1.55} /* ---------- Cómo llegar: la dirección es el titular ---------- */ .llegar{padding:clamp(60px,8vw,110px) 0;background:#0b0908;border-top:1px solid var(--linea);text-align:center} .llegar h2{font:400 clamp(44px,7vw,108px)/.92 var(--tit);text-transform:uppercase;letter-spacing:.005em} .llegar p{color:var(--suave);margin:14px auto 28px;max-width:60ch;font-size:clamp(16px,1.2vw,18px)} /* ---------- Otras salas: lista grande, sin imágenes (Fran, 19-sep) ---------- */ .otras{position:relative;padding:clamp(80px,10vw,140px) 0;background:var(--fondo)} .lista{list-style:none;padding:0;margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--linea)} .otra{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:clamp(14px,1.8vw,22px) 0;border-bottom:1px solid var(--linea);text-decoration:none} .otra .n{font:400 clamp(40px,6vw,96px)/.95 var(--tit);text-transform:uppercase;letter-spacing:.005em;transition:color .3s,transform .5s var(--curva)} .otra .d{font:500 clamp(12px,1vw,14px) var(--dat);letter-spacing:.16em;text-transform:uppercase;color:var(--suave);white-space:nowrap} .lista:hover .otra .n{color:rgba(233,225,211,.28)} .lista .otra:hover .n,.lista .otra:focus-visible .n{color:var(--acento-txt);transform:translateX(14px)} @media (max-width:900px){ .tc{top:96px;font-size:11px;letter-spacing:.12em} .tc span:first-child{display:none} .sub{font-size:19px} /* En movil la altura minima de pantalla completa dejaba hasta 61 px de sobrante debajo del contenido. */ .niveles{align-items:flex-start} .niveles-foto{inset:0;opacity:.55} /* Fran, 26-sep: en movil, los modos y sus caracteristicas en la misma pantalla, sin bajar. */ .niveles{padding-top:clamp(48px,7vw,64px)} .niveles-rej{grid-template-columns:1fr;grid-template-areas:"cab" "sel" "det";gap:18px} .niveles-cab p{margin-top:10px;font-size:15px;line-height:1.45} .op .nom{font-size:clamp(34px,9.6vw,40px)} .det .res{font-size:clamp(22px,5.8vw,24px);margin-bottom:12px} .det ul{gap:7px} .detalles{align-self:start} /* El pasillo es una pista de scroll de 640vh con el video pegado: en escritorio son 6,4 pantallas de cine y funciona. En el movil son 6,4 pantallas de tunel oscuro antes de llegar a reservar, y el boton se iba a dos tercios de la pagina. Se acorta la pista a 380vh: el video recorre el clip entero igual, solo que con menos scroll, y los cinco subtitulos siguen saliendo porque van por porcentaje de recorrido, no por altura fija. */ /* La foto del hero es apaisada (1920x1080) y en el movil la caja es estrecha y alta: al recortar para llenarla solo se ve una franja del 23 % del ancho. Con el encuadre de escritorio, en Paranormal esa franja caia en el cuerno y la cabra no se veia. Cada sala puede dar su propio encuadre de movil; si no lo da, usa el de escritorio. */ .cabeza .foto .img{background-position:var(--foto-pos-m,var(--foto-pos,50% 50%))} .pasillo-pista{height:380vh} .reserva .ancho{grid-template-columns:1fr;grid-template-areas:"tit" "cal" "letra"} .otra{flex-direction:column;gap:4px} } @media (prefers-reduced-motion:reduce){ .pasillo-pista{height:auto} .pasillo-fijo{position:relative;height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end} .subs{position:relative;bottom:auto;display:flex;flex-direction:column;gap:14px;padding:120px 20px 80px} .sub{opacity:1;transform:none;filter:none} .pista-ayuda{display:none} } /* ---------- Pie ---------- */ .barras-color{height:4px;background:linear-gradient(90deg,#c0c0c0 0 16.67%,#c0c000 0 33.33%,#00c0c0 0 50%,#00c000 0 66.67%,#c000c0 0 83.33%,#0000c0 0)} .pie{background:#060404;padding:56px 0 28px} .pie .ancho{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px} .pie h4{font:600 14px var(--dat);letter-spacing:.12em;text-transform:uppercase;color:var(--acento-txt);margin-bottom:10px} .pie ul{list-style:none;padding:0;display:grid;gap:6px;font-size:15px;color:var(--suave)} .pie ul a{text-decoration:none}.pie ul a:hover{color:var(--texto)} .pie .redes{list-style:none;padding:0;display:flex;gap:10px;margin-top:14px} .pie .redes a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--linea);border-radius:2px;color:var(--suave);transition:border-color .25s,color .25s,background .25s} .pie .redes a:hover{border-color:var(--acento-txt);color:var(--acento-txt);background:rgba(192,39,47,.08)} .pie .redes svg{width:20px;height:20px;fill:currentColor} .pie .firma{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--suave);transition:color .25s} .pie .firma img{height:20px;width:20px;opacity:.85;transition:opacity .25s} .pie .firma b{font:600 15px var(--txt);letter-spacing:.02em;text-transform:none;color:var(--texto)} .pie .firma:hover{color:var(--texto)}.pie .firma:hover img{opacity:1} .pie .marca{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center} .pie .marca img{height:120px;width:auto;margin-bottom:14px} .pie .marca p{color:var(--suave);font-size:15px;max-width:26ch} .pie .legal{grid-column:1 / -1;border-top:1px solid var(--linea);padding-top:16px;font:13px var(--dat);letter-spacing:.08em;text-transform:uppercase;color:var(--suave);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} /* ---------- Barra de reservar que sube al pasar la cabecera ---------- */ /* Quitada el 21-sep a petición de Fran: tapaba el pie (enlace a Simviotik). */ .fija{display:none} .fija b{font:400 26px/1 var(--tit);text-transform:uppercase} .fija small{display:block;font:13px var(--dat);letter-spacing:.08em;text-transform:uppercase;color:var(--suave)} @media (max-width:900px){ /* Entre las etiquetas repetidas, las migas y los botones partidos en dos lineas, el boton se salia de la primera pantalla. Con 52svh entra entero y la foto sigue mandando. El punto del ojo lo recoloca el JS al cambiar la altura. */ /* Fran, 26-sep: «que en movil la portada se vea todo, como en TRUECRIME». La foto ocupa lo que sobra tras el texto (minimo 30svh): foto, titulo, frase, datos y botones caben en una pantalla en las cinco salas, tengan el titulo a una linea o a dos. */ .cabeza{grid-template-columns:1fr;grid-template-rows:minmax(25svh,1fr) auto;min-height:100svh} .cabeza .txt{padding:24px 18px 64px} /* Fran, 26-sep: «que se vean un poco mas de largo». La foto baja por detras del titulo y la frase y se funde con el negro antes de los datos: mas imagen y el hero sigue cabiendo en una pantalla. */ .cabeza .foto{grid-row:1 / 3;grid-column:1} .cabeza .txt{grid-row:2;grid-column:1} .cabeza .foto::after{background:linear-gradient(180deg,rgba(4,5,5,.55) 0,transparent 14%,transparent 42%,rgba(4,5,5,.55) 56%,rgba(4,5,5,.9) 70%,#040505 82%)} .cabeza .txt .glitch,.cabeza .txt .cita{text-shadow:0 2px 18px rgba(0,0,0,.9)} /* Paranormal no: el ojo de la cabra cae a media foto y quedaria bajo el titulo; sigue con la foto arriba */ main:has(.niveles[data-sala="paranormal"]) .cabeza .foto,main:has(.niveles[data-sala="truecrime"]) .cabeza .foto{grid-row:1} /* TRUECRIME tambien: asi se ven los tres (Fran) */ main:has(.niveles[data-sala="paranormal"]) .cabeza .foto::after,main:has(.niveles[data-sala="truecrime"]) .cabeza .foto::after{background:linear-gradient(90deg,transparent 55%,#040505),linear-gradient(180deg,rgba(4,5,5,.7),transparent 22%,transparent 80%,#040505)} .bajar{white-space:nowrap;font-size:12px;letter-spacing:.16em} } /* Pantallas cortas (iPhone SE): con el titulo a dos lineas no cabia ni con la foto al minimo. */ @media (max-width:900px) and (max-height:700px){ .glitch{font-size:56px} .cabeza .txt{padding-bottom:56px} /* la nota de Jueves Frikis no cabia entera en pantallas cortas (Fran, 27-sep): mas compacta para que "Entrar cuando cierre el museo" siga en la primera pantalla. El tamano de letra se reafirma mas abajo, despues del bloque que la agranda para el resto del movil */ main:has(.niveles[data-sala="truecrime"]) .cabeza .nota-hero{margin-top:0;margin-bottom:4px} main:has(.niveles[data-sala="truecrime"]) .nota-hero-eti{margin-bottom:2px} main:has(.niveles[data-sala="truecrime"]) .cita{margin-bottom:10px} main:has(.niveles[data-sala="truecrime"]) .marcas-ac{margin-bottom:8px} } @media (max-width:900px){ /* Los dos botones sumaban 362 px en un hueco de 354 y se partian en dos lineas, con alturas distintas (62 y 45). A mitades iguales caben en una y quedan del mismo alto. */ /* Cuatro datos no caben en una fila de 354 px: van a dos por fila, con la linea fina solo entre columnas. Las salas de tres datos dejan la ultima celda a lo ancho. */ /* Fran, 26-sep: los datos en una sola fila tambien en movil; ocupan la mitad de alto y ese alto se lo queda la foto de la portada. Tamano de movil y las etiquetas largas parten dentro de su columna. */ /* Columnas iguales y cada dato centrado en la suya (Fran, 26-sep): la primera columna llevaba menos margen que las demas y el conjunto quedaba descompensado. */ .marcas{grid-auto-flow:column;grid-auto-columns:1fr;gap:0;margin:4px 0 12px} .marcas div,.marcas div + div,.marcas div:last-child{padding:0 4px;border-left:1px solid var(--linea);gap:3px;justify-items:center;text-align:center} .marcas div:first-child{border-left:0} .marcas b{font-size:clamp(22px,6.4vw,27px);white-space:nowrap} .marcas span{font-size:8.5px;letter-spacing:.1em;line-height:1.25;white-space:normal} .marcas-ac{margin-bottom:18px;gap:3px 12px} .cita{font-size:19px} .historia p{text-wrap:balance} .historia p br{display:none} .cabeza .acciones{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cabeza .acciones .btn{display:grid;place-items:center;text-align:center;padding-left:6px;padding-right:6px} .pie .ancho{grid-template-columns:1fr 1fr} } /* `*` no alcanza a ::before ni a ::after: sin esto, el glitch del titular de las fichas seguia corriendo con el movimiento reducido activado. Y el scroll suave tambien es movimiento. */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}} .senal{visibility:hidden} .senal.va{visibility:visible;animation:senal .5s var(--d,0s) steps(4) both} @keyframes senal{0%{transform:translateX(-8px) skewX(-6deg);text-shadow:-5px 0 rgba(255,40,80,.85),5px 0 rgba(40,220,255,.75);opacity:.4}50%{transform:translateX(5px);text-shadow:3px 0 rgba(255,40,80,.6),-3px 0 rgba(40,220,255,.5)}100%{transform:none;opacity:1}} /* al cambiar de nivel, la luz de la sala parpadea como una bombilla que falla */ .niveles.parpadea .niveles-foto,.niveles.parpadea::before{animation:parpadeoLuz .55s steps(1)} @keyframes parpadeoLuz{0%{opacity:.15}18%{opacity:1}30%{opacity:.25}46%{opacity:1}60%{opacity:.5}72%{opacity:1}} @media (prefers-reduced-motion:reduce){.senal{visibility:visible}} .pie .horario{font-size:13px;color:var(--tenue);line-height:1.5} .pie h2{font:600 14px var(--dat);letter-spacing:.12em;text-transform:uppercase;color:#E8434B;margin-bottom:10px} .pie .legales a{text-decoration:none}.pie .legales a:hover{color:var(--texto)} /* Pasillo con vídeo vertical (salas sin grabación horizontal): en ordenador, el clip en su marco y detrás su imagen desenfocada */ @media (min-width:901px){ /* el tratamiento del clip vertical se movio abajo: vivia en un bloque de escritorio y el clip vertical solo se carga por debajo de 900 px, asi que no se aplicaba nunca */ } /* Enlace a la sala hermana dentro de los niveles («¿buscas más intensidad?») */ .hermana{margin-top:22px;padding-top:16px;border-top:1px solid var(--linea);color:var(--suave);font-size:15px} .hermana a{color:var(--texto);text-decoration-color:var(--acento-txt);text-underline-offset:3px} .pie .legal nav a{text-decoration:none}.pie .legal nav a:hover{color:var(--texto)} /* Niveles: velo más oscuro para que el texto se lea sobre imágenes claras (Saw, #TRUECRIME) */ .niveles-foto::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.38)} .det .res,.det li,.niveles-cab p{text-shadow:0 2px 12px rgba(0,0,0,.9)} @media (max-width:900px){.niveles-foto{opacity:.4}} /* Paranormal y Expediente (Fran, 26-sep): el color del nivel tapaba la foto. Aqui la foto es oscura, asi que el velo baja, cada nivel la aclara en vez de apagarla y el foco de color tine sin cubrir. */ .niveles[data-sala="paranormal"]::before,.niveles[data-sala="expediente"]::before{opacity:.45;animation:none} .niveles[data-sala="paranormal"] .niveles-foto::before,.niveles[data-sala="expediente"] .niveles-foto::before{background:rgba(0,0,0,.12)} .niveles[data-sala="paranormal"][data-i="0"] .niveles-foto,.niveles[data-sala="expediente"][data-i="0"] .niveles-foto{filter:saturate(1.2) contrast(1.1) brightness(1.3)} .niveles[data-sala="paranormal"][data-i="1"] .niveles-foto,.niveles[data-sala="expediente"][data-i="1"] .niveles-foto{filter:saturate(.95) contrast(1.05) brightness(1.2)} .niveles[data-sala="paranormal"][data-i="2"] .niveles-foto,.niveles[data-sala="expediente"][data-i="2"] .niveles-foto{filter:saturate(.85) contrast(1.05) brightness(1.15)} @media (max-width:900px){.niveles[data-sala="paranormal"] .niveles-foto,.niveles[data-sala="expediente"] .niveles-foto{opacity:.7}} /* ---------- La historia en texto (fichas sin vídeo de pasillo, p. ej. #TRUECRIME desde el 21-sep) ---------- */ /* La historia en texto (TRUECRIME). Fran, 26-sep: fundidos con la portada (#040505) y con los niveles (#000), y la tipografia de la casa: cada frase es un golpe en Bebas, como los subtitulos del pasillo de las otras salas; las acotaciones entre corchetes, en rojo y pequenas. */ .historia{padding:clamp(64px,8vw,110px) 0 clamp(80px,9.5vw,130px);text-align:center; background:linear-gradient(180deg,#040505,var(--fondo) 120px,var(--fondo) calc(100% - 150px),#000)} .historia .ancho{max-width:min(100%,880px)} .historia .ante{font:500 clamp(12px,.95vw,14px) var(--dat);letter-spacing:.24em;text-transform:uppercase;color:var(--acento-txt);margin-bottom:14px} .historia h2.tit{margin-bottom:clamp(26px,3.2vw,44px)} .historia p{font:400 clamp(22px,2.4vw,34px)/1.08 var(--tit);text-transform:uppercase;letter-spacing:.01em;color:var(--texto);margin:0 auto clamp(16px,1.9vw,26px);max-width:52ch} .historia .ante,.historia p.acot{max-width:none} .historia p.acot{font:400 clamp(14px,1.1vw,16px)/1.4 var(--dat);letter-spacing:.2em;text-transform:uppercase;color:var(--acento-txt);opacity:.9;margin-top:clamp(-6px,-.6vw,-2px)} .historia p:last-child{margin-bottom:0} /* ---------- Móvil: dedo y letra (23-sep-2026) ---------- Dentro de la media query, el escritorio queda igual. Lo que se toca, 44 px. */ @media (max-width:900px){ .pie ul{gap:0} .pie ul li{display:flex} .pie ul li a{display:inline-flex;align-items:center;min-height:44px} .pie .legal{gap:14px} .pie .legal nav a{display:inline-block;padding:10px 0} .pie .firma{padding:10px 0} .pie .redes a{width:48px;height:48px} .saltar{display:inline-flex;align-items:center;min-height:44px} /* Miga de pan y enlace a la sala hermana: 21 y 16 px de alto */ .migas a{display:inline-block;padding:12px 0} .hermana a{display:inline-block;padding:10px 0} /* La flecha de bajar del hero medía 21 px de alto */ .bajar{padding:12px 16px;bottom:10px} /* Elegir nivel: los tres botones eran finos para el dedo */ .op{padding:5px 0;min-height:44px} /* «¿Aún tienes valor?»: las otras salas */ .otras .otra{padding:14px 0} } /* «¿Lo prefieres hablar?»: debajo del calendario, en el hueco que ya quedaba vacío. No es solo para quien no puede usar el calendario: es para el grupo de 15 que no lo ve claro, para quien no le carga el widget y para el que simplemente prefiere llamar. */ .hablar{margin-top:18px;padding-top:14px;border-top:1px solid var(--linea);font:15px/1.6 var(--txt);color:var(--suave)} .hablar a{color:var(--texto);text-decoration-color:var(--acento-txt);text-underline-offset:4px;display:inline-block;padding:6px 0;margin:-6px 0} .hablar a:hover{color:var(--acento-txt)} /* Cuando se llega con un equipo y un pase elegidos desde la portada */ .elegido{margin:0 0 14px;font:500 14px var(--dat);letter-spacing:.12em;text-transform:uppercase;color:var(--suave)} .elegido b{color:var(--texto);font-weight:500} .elegido a{color:var(--acento-txt);text-underline-offset:3px;margin-left:.6em} .reserva .calendario #ercalendar .checkout-slot-row .btn.hora-elegida::before{background:#8E1016;box-shadow:inset 0 0 0 2px #E8434B} .reserva .calendario #ercalendar .checkout-slot-row .btn.hora-elegida{-webkit-text-fill-color:#fff} /* El clip del pasillo en movil es vertical (540x960). Mientras la ventana sea mas estrecha que alta que el propio clip, llenarla entera funciona: recorta arriba y abajo y ya esta. Pero en cuanto la ventana es mas ancha que 9/16 (una ventana de escritorio sin maximizar, un movil tumbado) estirar 540 px a lo ancho lo deja borroso. Ahi el clip se centra a su proporcion y detras va su propio poster desenfocado, que rellena sin inventar imagen. Esto vivia en un bloque de min-width:901px, donde no podia aplicarse nunca. */ @media (max-width:900px) and (min-aspect-ratio:9/16){ .pasillo.vertical .pasillo-fijo{background:#000} .pasillo.vertical .pasillo-fijo::before{content:"";position:absolute;inset:-60px; background:var(--poster-v) center/cover;filter:blur(40px) brightness(.35) saturate(1.2)} .pasillo.vertical .pasillo-v{left:50%;width:auto;height:100%;aspect-ratio:9/16; transform:translateX(-50%);object-fit:cover;box-shadow:0 0 80px rgba(0,0,0,.9)} } /* Aviso en el hero de Saw Tribute: quien ya jugó Horror Club no debe reservarla (Fran, 26-sep) */ .aviso-hero{margin:14px 0 20px;padding-left:12px;border-left:2px solid var(--acento);font:500 clamp(13px,1vw,15px)/1.45 var(--dat);letter-spacing:.14em;text-transform:uppercase;color:var(--acento-txt);text-shadow:0 1px 10px rgba(0,0,0,.8)} /* Nota del hero (Fran, 27-sep): un titular pequeño en versalitas (como el aviso de arriba) y debajo la frase con la misma tipografia elegante que la cita (Bebas Neue). Solo en #TRUECRIME por ahora, para los Jueves Frikis. */ .nota-hero{margin:24px 0 0;max-width:66ch} .nota-hero-eti{font:600 13px var(--dat);letter-spacing:.16em;text-transform:uppercase;color:var(--acento-txt);margin-bottom:6px;text-shadow:0 1px 10px rgba(0,0,0,.8)} .nota-hero-txt{font:400 clamp(18px,1.7vw,22px)/1.3 var(--tit);letter-spacing:.01em;color:var(--texto);text-shadow:0 1px 10px rgba(0,0,0,.8)} /* movil (Fran, 27-sep): sin el hueco extra antes del precio */ @media (max-width:900px){.salto-extra{display:none}} /* movil (Fran, 27-sep): la nota de Jueves Frikis sube antes de los botones y queda centrada y mas grande; los botones bajan del todo. 17px es lo mas grande que cabe en una linea cada frase sin partirla (medido contra el ancho real del movil mas estrecho). */ @media (max-width:900px){ main:has(.niveles[data-sala="truecrime"]) .cabeza .nota-hero{order:1;text-align:center;margin-top:0;margin-bottom:18px} main:has(.niveles[data-sala="truecrime"]) .nota-hero-txt{font-size:17px} main:has(.niveles[data-sala="truecrime"]) .cabeza .acciones{order:2} } /* TRUECRIME es un evento con fecha: sin el «Lo quiero para regalar sin fecha» del calendario (Fran, 26-sep) */ main:has(.niveles[data-sala="truecrime"]) .calendario [class*="checkout-gift-button"]{display:none!important} main:has(.niveles[data-sala="truecrime"]) .calendario{min-height:544px} /* sin ese boton, el calendario cargado mide 543 */ /* TRUECRIME: la hora de cada pase bajo su nombre en el hero, solo escritorio (Fran, 26-sep) */ .pase-h{display:inline-grid;justify-items:center;vertical-align:top} .pase-h small{font:500 .92em/1.2 var(--dat);letter-spacing:.1em;color:var(--texto);margin-top:3px} @media (max-width:900px){.pase-h{display:inline}.pase-h small{display:none}} /* TRUECRIME: las fechas del evento encima de los pases (Fran, 26-sep) */ .marcas-ac:has(.pase-h){flex-direction:column;align-items:flex-start;gap:6px} .marcas-ac:has(.pase-h) em{order:-1} /* TRUECRIME, mas grande y con presencia (Fran, 26-sep): las fechas en Bebas y los pases como una cartelera, nombre en rojo y la hora grande debajo, separados por una raya fina. */ @media (min-width:901px){ .marcas-ac:has(.pase-h){gap:12px;margin-top:4px} .marcas-ac:has(.pase-h) em{font:400 clamp(24px,2vw,32px)/1 var(--tit);letter-spacing:.03em;color:var(--texto);text-transform:uppercase} .marcas-ac:has(.pase-h) i{display:flex;font-size:0} .marcas-ac .pase-h{justify-items:start;font:500 12px/1 var(--dat);letter-spacing:.2em;padding:0 clamp(14px,1.4vw,22px)} .marcas-ac .pase-h:first-child{padding-left:0} .marcas-ac .pase-h + .pase-h{border-left:1px solid var(--linea)} .marcas-ac .pase-h small{font:400 clamp(26px,2.2vw,34px)/1 var(--tit);letter-spacing:.02em;color:var(--texto);margin-top:6px} } @media (min-width:901px) and (max-height:800px){.colab{margin-top:18px}.colab img{width:clamp(64px,5.4vw,80px)}.marcas-ac:has(.pase-h){gap:8px}} /* 1280x720: el hero sigue cabiendo */ /* Saw en moviles bajos (iPhone SE): el titulo sube mas y tapaba el hocico; la foto sube un poco mas (Fran, 26-sep) */ @media (max-width:900px) and (max-height:700px){main:has(.niveles[data-sala="saw"]) .cabeza .foto .img{background-position:50% -19svh}} /* TRUECRIME movil: los tres un poco mas grandes y mas abajo, con aire bajo el logo (Fran, 26-sep) */ /* TRUECRIME movil (Fran, 26-sep): los tres de cerca y enteros, con la cabeza de Myers justo bajo el logo. En la foto (1600x900) los tres van de x=340 a x=1300 y la cabeza de Myers empieza en y=125: esa franja de 960 px ocupa todo el ancho y la cabeza cae a 66 px del borde. */ @media (max-width:900px){main:has(.niveles[data-sala="truecrime"]) .cabeza .foto .img{inset:0 0 auto 0;height:calc(66px + 82vw);animation:none;background-repeat:no-repeat;background-size:166.67vw auto;background-position:-35.42vw calc(66px - 13.02vw);-webkit-mask-image:linear-gradient(180deg,#000 calc(66px + 54vw),rgba(0,0,0,.62) calc(66px + 64vw),rgba(0,0,0,.3) calc(66px + 71vw),rgba(0,0,0,.1) calc(66px + 76vw),rgba(0,0,0,.03) calc(66px + 79vw),transparent calc(66px + 81vw));mask-image:linear-gradient(180deg,#000 calc(66px + 54vw),rgba(0,0,0,.62) calc(66px + 64vw),rgba(0,0,0,.3) calc(66px + 71vw),rgba(0,0,0,.1) calc(66px + 76vw),rgba(0,0,0,.03) calc(66px + 79vw),transparent calc(66px + 81vw))} main:has(.niveles[data-sala="truecrime"]) .cabeza .foto{overflow:visible} /* las piernas siguen por detras del titulo y se funden ahi */ main:has(.niveles[data-sala="truecrime"]) .cabeza .foto::after{background:linear-gradient(180deg,rgba(4,5,5,.85) 0,rgba(4,5,5,.35) 40px,transparent 75px)}} /* Paranormal movil: mas foto por abajo sin moverla (Fran, 26-sep). La foto ya se ve entera de alto: lo que la tapaba era el fundido a negro del ultimo 20 %. Ahora la imagen llega a su borde de verdad y se funde ahi mismo. */ @media (max-width:900px){ main:has(.niveles[data-sala="paranormal"]) .cabeza .foto{overflow:visible} main:has(.niveles[data-sala="paranormal"]) .cabeza .foto::after{background:linear-gradient(90deg,transparent 55%,rgba(4,5,5,.6)),linear-gradient(180deg,rgba(4,5,5,.7),transparent 22%)} main:has(.niveles[data-sala="paranormal"]) .cabeza .foto .img{-webkit-mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,.55) 86%,rgba(0,0,0,.15) 95%,transparent);mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,.55) 86%,rgba(0,0,0,.15) 95%,transparent)} }