/* Madrid Terror · cabecera y menú de las páginas interiores y las fichas (la portada lleva la suya). */
/* ---------- Cabecera: la de la portada, con fondo propio al bajar ---------- */
.cabecera{position:fixed;top:0;left:0;right:0;z-index:40;transition:transform .35s var(--curva),background-color .35s}
.cabecera::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,7,.85),rgba(10,8,7,.3) 70%,transparent);pointer-events:none;transition:opacity .35s}
.cabecera.solida{background-color:rgba(10,8,7,.95);box-shadow:0 1px 0 rgba(233,225,211,.08)}
.cabecera.oculta{transform:translateY(-100%)}
.cabecera .barras{position:absolute;top:0;left:0;right:0;height:3px;display:flex;opacity:.85}
.cabecera .barras i{flex:1}
.cabecera .fila-cab{position:relative;display:flex;align-items:center;gap:clamp(14px,2vw,34px);height:clamp(76px,8.4vh,104px);padding:0 clamp(16px,3.2vw,44px)}
.cabecera .logo{margin-top:clamp(16px,3.4vh,38px)}
.cabecera .logo img{height:min(clamp(56px,6.4vw,96px),9vh);width:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.85))}
.cabecera nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,30px);margin-left:auto}
.cabecera .enlace{position:relative;font:600 14px/1 var(--txt);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--texto);opacity:.88;padding:10px 2px;background:none;border:0;cursor:var(--cur-p);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.cabecera .enlace::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--acento);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--curva)}
.cabecera button.enlace::after{right:19px}   /* la raya subraya la palabra, no la flecha */
.cabecera .enlace:hover,.cabecera .enlace[aria-current="page"]{opacity:1}
.cabecera .enlace:hover::after,.cabecera .enlace[aria-expanded="true"]::after,.cabecera .enlace[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.cabecera .flecha{font-size:10px;opacity:.7;transition:transform .3s}
.cabecera [aria-expanded="true"] .flecha{transform:rotate(180deg)}
.cabecera .btn{padding:13px 22px}
.desplegable{position:relative}
/* misma caja que el desplegable de la portada, pero sin la ventana del vídeo */
.desplegable .panel{position:absolute;top:calc(100% - 12px);right:0;left:auto;width:min(418px,calc(100vw - 28px));padding:14px;background:rgba(12,9,8,.97);border:1px solid var(--linea);border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,.6);overflow:hidden;z-index:3;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .3s var(--curva),visibility 0s .3s}
.desplegable .panel.abierto{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s var(--curva)}
/* las mismas rayitas de vídeo que en la portada */
.desplegable .panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);opacity:.5}
/* las filas del desplegable, iguales a las de la portada: rótulo, nombre en dos colores y datos */
.desplegable .panel a{display:grid;grid-template-columns:6.4em 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:6px;text-decoration:none;border:1px solid transparent;transition:background .2s,border-color .2s}
.desplegable .panel a:hover{background:rgba(233,225,211,.06);border-color:var(--linea)}
.desplegable .panel a .num{font:17px/1.1 var(--dat);color:var(--acento-txt);text-transform:uppercase;letter-spacing:.06em}
.desplegable .panel a .nom{font:400 clamp(20px,1.6vw,26px)/1 var(--tit);text-transform:uppercase}
.desplegable .panel a .dat{display:block;margin-top:3px;font:15px var(--dat);color:var(--suave);text-transform:uppercase;letter-spacing:.06em}
.menu-movil #menuSalas a small,.menu-movil a small{font:400 12.5px/1.4 var(--dat);color:var(--tenue);text-transform:uppercase;letter-spacing:.16em}
.abrir-menu{display:none;margin-left:auto;width:48px;height:48px;background:none;border:0;cursor:var(--cur-p);flex-direction:column;justify-content:center;align-items:center;gap:6px}
.abrir-menu span{display:block;width:26px;height:2px;background:var(--texto);transition:transform .3s var(--curva),opacity .2s}
.abrir-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.abrir-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.abrir-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.menu-movil{position:fixed;inset:0;z-index:39;background:#050303;padding:120px 24px 40px;display:flex;flex-direction:column;gap:6px;overflow:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--curva);visibility:hidden}
.menu-movil.abierto{clip-path:inset(0);visibility:visible}
/* Cada entrada es una ficha: el nombre arriba y el dato debajo, siempre igual. Antes iban en la
   misma linea y el dato se metia en la columna que sobraba: con nombres largos se partia y
   dejaba un "MIN" solo en la linea siguiente. Es el mismo trato que en la portada. */
.menu-movil a{display:grid;gap:3px;padding:11px 0;text-decoration:none;
  font:400 clamp(32px,8.4vw,46px)/1.05 var(--tit);text-transform:uppercase;
  }
/* la raya solo entre las salas, que llevan data-num; Empresas, Conocenos y el WhatsApp no */
.menu-movil a[data-num]{border-bottom:1px solid rgba(233,225,211,.08)}
/* Pantallas bajas (un iPhone SE deja 640 px). El menu tiene que caber entero, con el sello de
   Regala terror incluido, sin deslizar: un menu que hay que desplazar esconde justo lo que mas
   interesa que se vea. Se aprieta todo un poco y entra. */
@media (max-height:760px){
  .menu-movil{padding-top:84px;padding-bottom:22px}
  .menu-movil a{padding:6px 0;font-size:clamp(25px,6.9vw,33px)}
  .menu-movil a small{font-size:11px;letter-spacing:.14em}
  .menu-movil a.peq{margin-top:12px;font-size:13px}
  .menu-movil .grupo{margin:18px 0 6px;font-size:15px}
  .menu-movil .grupo:first-of-type{margin-top:22px}
  .menu-movil a.tras-grupo{margin-top:18px}
  .menu-movil .pie{margin-top:18px}
  .menu-movil .btn.fuerte{margin-top:16px;font-size:23px;padding:8px 20px 6px}
}
.menu-movil a.peq{font:500 14px var(--dat);letter-spacing:.14em;color:var(--suave);margin-top:16px;border-bottom:0;padding-bottom:0}
.menu-movil .btn{margin-top:22px;align-self:flex-start;font:700 13px/1 var(--txt)}
@media (max-width:980px){.cabecera nav{display:none}.abrir-menu{display:flex}.cabecera .logo img{height:54px}.cabecera .fila-cab{height:80px}}
/* el sello, en pequeño, para la cabecera */
/* 24 px, no 23: a partir de 24 el minimo de contraste baja de 4,5 a 3:1 y el rojo de la marca
   (3,40:1) ya lo pasa. Asi el boton mantiene su color exacto. */
.cabecera .btn.fuerte{padding:8px 18px 5px;font-size:24px;transform:rotate(-3deg)}
.cabecera .btn.fuerte:hover{transform:rotate(-3deg) scale(.94)}
.cabecera .btn.fuerte:active{transform:rotate(-3deg) scale(.88)}
/* en el menú de móvil el sello conserva su letra: .menu-movil .btn y .menu-movil a se la quitaban */
.menu-movil .btn.fuerte{font:400 28px/1 var(--tit);letter-spacing:.1em;padding:10px 24px 7px;display:inline-flex;justify-self:center;align-self:center;gap:0;border-bottom:3px solid var(--acento)}   /* el borde de abajo salia gris (lo pisaba .menu-movil a) y el sello, a la izquierda (Fran, 26-sep) */
/* Con el menu del movil o la ventana de una cinta abiertos, la pagina de detras no se mueve. En el iPhone no basta con el body: Safari desplaza el documento igual, y se veia bajar la barra sin que bajara nada (Fran, 26-sep). */
html:has(.menu-movil.abierto),html:has(dialog[open]){overflow:hidden}
.menu-movil,dialog{overscroll-behavior:contain}