/* ============================================================================= Salas Carrusel — estilos. Todo scopeado bajo .salas-page para no chocar con el tema. La clase de estado .is-detail-open vive en .salas-page, no en , para evitar colisiones con clases del tema. ============================================================================= */ .salas-page { /* Tokens */ --bg-top: transparent; --bg-bot: transparent; --bg-split: 65%; --fg: #111111; --slide-w: clamp(180px, 28cqw, 300px); --gap: clamp(6px, 2cqw, 32px); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --overlay-bg: rgba(20, 20, 20, 0.74); --overlay-fg: #ffffff; position: relative; width: 100%; min-height: 100dvh; /* ocupa al menos el viewport, pero puede crecer */ display: flex; flex-direction: column; color: var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif; -webkit-font-smoothing: antialiased; background: linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-top) var(--bg-split), var(--bg-bot) var(--bg-split), var(--bg-bot) 100%); } .salas-page, .salas-page *, .salas-page *::before, .salas-page *::after { box-sizing: border-box; } /* ---- Header ---- */ .salas-page .page-header { flex: 0 0 auto; padding: 40px 24px 0; display: flex; justify-content: center; transition: opacity 280ms var(--ease), transform 320ms var(--ease); } .salas-page .logo { margin: 0; font-weight: 800; letter-spacing: -0.04em; line-height: 0.92; font-size: clamp(36px, 6.4vw, 92px); color: var(--fg); text-align: center; user-select: none; white-space: nowrap; } .salas-page .logo__l1, .salas-page .logo__l2 { display: block; } .salas-page .logo__arr { display: inline-block; font-size: 0.55em; vertical-align: 0.15em; margin-right: 0.15em; font-weight: 700; } /* ---- Stage / Carrusel ---- */ .salas-page .stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; width: 100%; container-type: inline-size; /* habilita cqw para slide-w/gap */ background: transparent; /* Acompasado con la entrada del panel (1300ms): el stage termina de encogerse un pelín antes para que el panel "llegue encima". */ transition: width 1250ms var(--ease), background-color 1250ms var(--ease); } .salas-page .carousel { position: relative; width: 100%; height: 100%; display: flex; align-items: center; user-select: none; } .salas-page .carousel__viewport { position: relative; width: 100%; height: 100%; display: flex; align-items: center; overflow: hidden; cursor: grab; touch-action: pan-y; } .salas-page .carousel.is-dragging .carousel__viewport { cursor: grabbing; } .salas-page .carousel__track { list-style: none; margin: 0; padding: 0 var(--gap); display: flex; align-items: center; gap: var(--gap); will-change: transform; transform: translate3d(0, 0, 0); } .salas-page .slide { position: relative; flex: 0 0 auto; width: var(--slide-w); transform-origin: 50% 50%; will-change: transform; cursor: pointer; } .salas-page .slide figure { position: relative; margin: 0; width: 100%; aspect-ratio: var(--ar, 1); overflow: hidden; background: #f2efe9; } .salas-page .slide .media { position: absolute; inset: 0; will-change: transform; } .salas-page .slide .media img, .salas-page .slide .media video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; background: #f2efe9; } /* ---- Overlay hover ---- */ .salas-page .slide__over { position: absolute; inset: 0; background: var(--overlay-bg); color: var(--overlay-fg); opacity: 0; transition: opacity 360ms var(--ease); display: grid; grid-template-rows: auto 1fr auto; padding: clamp(10px, 1.4vw, 20px); pointer-events: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } @media (hover: hover) { .salas-page .slide:hover .slide__over { opacity: 1; } } @media (hover: none) { .salas-page .slide.is-active .slide__over { opacity: 1; } } .salas-page .slide__h { justify-self: end; align-self: start; font-size: clamp(11px, 0.95vw, 14px); letter-spacing: 0.04em; font-weight: 700; } .salas-page .slide__title { margin: 0; align-self: left; justify-self: left; text-align: left; font-size: clamp(16px, 1.6vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; text-transform: uppercase; padding: 0 8px 10px 0; font-family: "Nebulica", Sans-serif; margin-left: 0; margin-right: auto; } .slide__desc { font-size: 14px; font-family: "Nebulica", Sans-serif; } .salas-page .slide__entrar { align-self: start; display: grid; justify-items: end; row-gap: 4px; font-size: clamp(10px, 0.85vw, 13px); letter-spacing: 0.06em; text-transform: uppercase; } .salas-page .slide__arrow { font-weight: 700; color: #FC1F2D; font-family: "JetBrains Mono", Sans-serif; } .salas-page .slide__cta { text-decoration: underline; text-underline-offset: 3px; font-family: "JetBrains Mono", Sans-serif; } /* ---- Footer / categorías ---- */ .salas-page .page-footer { display: none; flex: 0 0 auto; padding: 16px 24px 28px; color: var(--fg); transition: opacity 280ms var(--ease), transform 320ms var(--ease); } .salas-page .categories { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; align-items: baseline; gap: clamp(12px, 2vw, 40px); flex-wrap: wrap; } .salas-page .categories__item a { display: inline-flex; align-items: baseline; gap: 0.35em; color: inherit; text-decoration: underline; text-underline-offset: 4px; font-weight: 800; letter-spacing: 0.04em; font-size: clamp(13px, 1.1vw, 17px); text-transform: uppercase; } .salas-page .categories__arr { font-size: 0.85em; text-decoration: none; display: inline-block; vertical-align: 0.1em; } @media (max-width: 640px) { .salas-page .categories { justify-content: center; } .salas-page .logo { white-space: normal; } } /* ============================================================ Vista detalle (panel deslizable desde la derecha) ============================================================ */ .salas-page .detail { position: fixed; top: 0; right: 0; height: 100dvh; /* overlay modal: ocupa la pantalla completa */ width: 55%; background: #cfcabf; color: #111; transform: translateX(101%); opacity: 0; transition: transform 460ms var(--ease), opacity 380ms var(--ease); z-index: 50; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background-color: transparent; background-image: linear-gradient(180deg, #D0D0D0 65.5%, #FC1F2D 82.5%); } .salas-page .detail__bar { position: absolute; z-index: 999; width: 96%; left: 2%; height: auto; padding-top: 40px; display: flex; justify-content: space-between; align-items: flex-start; background: none; pointer-events: none; /* deja pasar el scroll al body; botones reactivan abajo */ } .salas-page .detail__close, .salas-page .detail__cta { background: none; border: 0; padding: 0; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; line-height: 1.15; pointer-events: auto; display: flex; align-items: end; text-align: end; font-family: "JetBrains Mono", Sans-serif; font-size: 17px; font-weight: 500; color: #252525; } .salas-page .detail__close { flex-direction: column; gap: 4px; } .salas-page .detail__close-x { text-decoration: none; } .salas-page .detail__close-label { text-decoration: underline; text-underline-offset: 4px; } .salas-page .detail__cta .detail__inscribe_text { text-decoration: underline !important; text-underline-offset: 4px; } /* Estado abierto */ .salas-page.is-detail-open .detail { transform: translateX(0); opacity: 1; /* Entrada cinematográfica: deslizamiento largo y pausado desde la derecha con leve escalado y fundido. Curva muy suave (arranque y final amortiguados) para una llegada elegante, sin rebote. */ animation: salas-detail-in 1300ms cubic-bezier(0.22, 1, 0.30, 1) both; } @keyframes salas-detail-in { 0% { transform: translateX(90px) scale(0.975); opacity: 0; } 100% { transform: translateX(0) scale(1); opacity: 1; } } /* Cuando el detalle está abierto, sacamos header y footer del flujo para que el .stage (con su color de fondo) ocupe toda la altura del viewport. */ .salas-page.is-detail-open .page-header, .salas-page.is-detail-open .page-footer { display: none; } .salas-page.is-detail-open .stage { width: 45%; background-color: #2a2622; /* Tokens del rail lateral: ancho un pelín menor que el grande. */ --slide-w: clamp(180px, 75cqw, 270px); --gap: clamp(4px, 3cqw, 14px); min-height: 120vh; top: -80px; } .salas-page.is-detail-open .carousel { display: none; } .salas-page.is-detail-open .slide__over { display: none; } @keyframes salas-carousel-rise-in { from { transform: translateY(420px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ---- Rail lateral (Swiper) ---- */ .salas-page .rail { display: none; position: relative; width: 100%; height: 100%; } .salas-page.is-detail-open .rail { display: flex; align-items: center; animation: salas-carousel-rise-in 520ms var(--ease) both; } .salas-page .rail__swiper { width: 100%; overflow: hidden; } .salas-page .rail__swiper .swiper-wrapper { align-items: center; } .salas-page .rail__swiper .swiper-slide { width: var(--slide-w); flex-shrink: 0; cursor: grab; } /* En el rail forzamos la dimensión del figure: anchura = --slide-w; el alto cambia según si el slide está centrado (cuadrado) o no (1/3 más bajo). El aspect-ratio heredado del carrusel grande queda anulado. */ .salas-page .rail__swiper .swiper-slide figure { aspect-ratio: auto; width: 100%; height: calc(var(--slide-w) * 2 / 3); transition: height 360ms var(--ease); } .salas-page .rail__swiper .swiper-slide-active figure { height: var(--slide-w); } .salas-page .rail__swiper.is-grabbing .swiper-slide, .salas-page .rail__swiper .swiper-slide:active { cursor: grabbing; } /* Loading / error states del body del detalle (mientras llega el AJAX) */ .salas-page .detail__loading, .salas-page .detail__error { padding: 16px 0; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); } .salas-page .detail__error { color: #b00020; } .salas-page .detail__loading { display: inline-flex; align-items: center; gap: 10px; } .salas-page .detail__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.18); border-top-color: rgba(0, 0, 0, 0.55); animation: salas-spin 720ms linear infinite; flex: 0 0 auto; } a.detail__cta { flex-direction: column; gap: 4px; } body.wp-singular.single.single-sala header#site-header { display: none !important; } .salas-page .detail__close:hover, .salas-page .detail__cta:hover { background-color: transparent; color: #252525; } @keyframes salas-spin { to { transform: rotate(360deg); } } .slide__h { max-width: 36px; margin-left: auto; margin-right: 0; } /* Foco visible para slides accesibles por teclado. */ .salas-page .slide:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55); } li#formAccess { padding-top: 0 !important; padding-bottom: 0 !important; } .namemedium .nameWrapper { width: 100% !important; } button.detail__close { position: sticky; z-index: 10; margin-right: 14px; top: 35px; /*background-color: #D0D0D0 !important;*/ padding: 5px !important; max-width: fit-content; right: 0; margin-left: auto; } .body-single-open { overflow: hidden; background-color: #2a2622; } @media (min-width: 1400px) { .elementor-element.elementor-widget.elementor-widget-video { min-width: 299px; } .salas-page .slide__arrow { margin-right: -20px; } .salas-page .slide__entrar { margin-top: 20px; } .landing-form-content { max-height: 700px; overflow-y: scroll !important; } } @media (max-width: 768px) { .salas-page .detail { width: 100%; } .salas-page.is-detail-open .stage { display: none; } .home-banner-heart-logo img { min-width: 46px; margin-top: 12px; } .salas-page { min-height: 60dvh; } } @media (max-width: 590px) { .footer-legales, .footer-legales p { display: flex; flex-direction: column !important; justify-content: center !important; align-items: center !important; margin-top: 40px !important; } .footer-legales span { display: none !important; } .footer-legales a { text-decoration: underline !important; text-underline-offset: 3px; } } /* ------------------------------------------------------------------ */ /* Reducción de movimiento. */ /* Si el usuario (o su SO/navegador) pide reducir movimiento, el panel */ /* del detalle NO se desliza desde el lateral (se respeta su */ /* preferencia), pero TAMPOCO aparece de golpe: hace un fundido suave. */ /* Mismo criterio para el tilt del carrusel: se desactiva el skew para */ /* que no "salte". */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .salas-page .detail { transform: none; visibility: hidden; transition: opacity 320ms var(--ease), visibility 0s linear 320ms; } .salas-page.is-detail-open .detail { transform: none; opacity: 1; visibility: visible; transition: opacity 320ms var(--ease), visibility 0s; } /* El tilt (skewY) lo escribe el JS como transform inline en cada slide; aquí lo neutralizamos para que el carrusel no "salte". */ .salas-page .slide { transform: none !important; } }