/* ═══════════════════════════════════════════════════════════════════════
   FILM «UN RAPIFY, TODOS LOS MOSTRADORES» — la intro de la portada.
   El film es un video (ver docs/RAPIFY-MOTION.md): acá sólo hay el lienzo a
   pantalla completa y los controles. Nada anima durante la reproducción salvo
   la barra de progreso: en el celular lo único que trabaja es el decodificador.
   ═══════════════════════════════════════════════════════════════════════ */
.rs-cinema {
    --film-bg: #f7f4fd;
    --film-ink: #18112d;
    --film-violet: #7645ef;
    --film-lilac: #b997ff;
        --film-ease: cubic-bezier(.2,.75,.15,1);
    position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh;
    max-height: none; margin: 0; padding: 0; border: 0; color: var(--film-ink);
    background: var(--film-bg); overflow: hidden; overscroll-behavior: contain;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.rs-cinema:not([open]) { display: none; }
.rs-cinema::backdrop { background: #f7f4fd; }
.rs-cinema *, .rs-cinema *::before, .rs-cinema *::after { box-sizing: border-box; }
.rs-cinema button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rs-cinema button:focus-visible, .rs-cinema-replay:focus-visible { outline: 2px solid var(--film-violet, #7645ef); outline-offset: 4px; }

.rs-film { position: absolute; inset: 0; overflow: clip; background: var(--film-bg); }
/* El film es un lienzo entre las dos barras de controles: nunca va debajo de ellas.
   rs-cinema.js (frameFor) le da tamaño y posición en px, con su proporción exacta. */
.rs-film-video {
    position: absolute; left: 16px; top: 80px; width: calc(100% - 32px); height: calc(100% - 178px); display: block;
    object-fit: contain; background: var(--film-bg); border-radius: 22px;
    box-shadow: 0 30px 80px -20px #5a32be40, 0 0 0 1px #7645ef14;
    opacity: 0; transition: opacity .6s var(--film-ease);
}
@media (max-width: 640px) { .rs-film-video { border-radius: 16px; } }
.rs-film[data-ready="true"] .rs-film-video { opacity: 1; }
.rs-film-video::cue { font: 500 clamp(14px,1.6vw,20px)/1.4 Inter, sans-serif; background: #18112dcc; color: #fff; }

.rs-film-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Controles ─────────────────────────────────────────────────────────── */
.rs-film-top, .rs-film-bottom {
    position: absolute; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
    padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 18px max(22px, env(safe-area-inset-left));
    opacity: 0; transition: opacity .5s var(--film-ease) .3s;
}
.rs-film[data-ready="true"] .rs-film-top, .rs-film[data-ready="true"] .rs-film-bottom { opacity: 1; }
.rs-film-top { top: 0; justify-content: flex-end; padding-bottom: 12px; }
.rs-film-bottom {
    bottom: 0; padding-top: 10px; padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.rs-film-skip, .rs-film-sound, .rs-film-pause {
    min-height: 44px; border: 1px solid #18112d1f; border-radius: 999px; color: var(--film-ink);
    background: #ffffffb3; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: background .2s, border-color .2s, transform .25s var(--film-ease);
}
.rs-film-skip:hover, .rs-film-sound:hover, .rs-film-pause:hover { background: #fff; border-color: #7645ef55; }
.rs-film-skip:active, .rs-film-sound:active, .rs-film-pause:active { transform: scale(.96); }
.rs-film-skip { padding: 0 18px; font-size: 13px; letter-spacing: .01em; }
.rs-film-skip span { margin-left: 10px; }

/* «Activar sonido» es la acción que más importa del film: es la única que no ve quien no lo toca. */
.rs-film-sound { display: inline-flex; align-items: center; gap: 10px; padding: 0 18px 0 16px; font-size: 13px; margin-right: auto; }
.rs-film-sound:not(.is-on) { border-color: #7645ef66; color: #7645ef; box-shadow: 0 0 0 0 #7645ef66; animation: rs-film-call 2.4s ease-out 1.5s 3; }
.rs-film-sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.rs-film-sound-bars i { width: 2px; height: 4px; border-radius: 1px; background: currentColor; transition: height .3s; }
.rs-film-sound.is-on .rs-film-sound-bars i { animation: rs-film-eq .9s ease-in-out infinite alternate; }
.rs-film-sound.is-on .rs-film-sound-bars i:nth-child(2) { animation-delay: -.3s; }
.rs-film-sound.is-on .rs-film-sound-bars i:nth-child(3) { animation-delay: -.6s; }
.rs-film-sound.is-on .rs-film-sound-bars i:nth-child(4) { animation-delay: -.15s; }
.rs-film-sound-on, .rs-film-sound.is-on .rs-film-sound-off { display: none; }
.rs-film-sound.is-on .rs-film-sound-on { display: inline; }
.rs-film.is-paused .rs-film-sound-bars i { animation-play-state: paused; }

.rs-film-pause { width: 44px; flex: 0 0 44px; font-size: 14px; line-height: 1; }
.rs-film-chapters { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; min-width: 0; }
.rs-film-chapters button {
    display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 7px; align-items: baseline;
    min-height: 44px; padding: 6px 0 0; text-align: left; color: #18112d80; background: none; border: 0;
    transition: color .3s;
}
.rs-film-chapters button:hover, .rs-film-chapters button[aria-current="step"] { color: var(--film-ink); }
.rs-film-track { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: #18112d1a; overflow: hidden; }
.rs-film-track i { display: block; height: 100%; background: var(--film-violet); transform: scaleX(0); transform-origin: left; }
.rs-film-chapter-time { font: 500 11px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--film-violet); }
.rs-film-chapter-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-film-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; display: none; }
.rs-film-progress i { display: block; height: 100%; background: var(--film-violet); transform: scaleX(0); transform-origin: left; }

@media (max-width: 640px) {
    .rs-film-top { padding-left: 14px; padding-right: 14px; gap: 8px; }
    .rs-film-bottom { padding-left: 14px; padding-right: 14px; gap: 10px; }
    .rs-film-skip { padding: 0 14px; font-size: 12px; }
    .rs-film-sound { padding: 0 14px 0 12px; font-size: 12px; }
    .rs-film-chapters { gap: 6px; }
    .rs-film-chapter-name { display: none; }
    .rs-film-chapter-time { font-size: 10px; }
}
@media (max-width: 360px) {
    .rs-film-chapter-time { display: none; }
    .rs-film-chapters button { min-height: 30px; padding-top: 14px; }
}

/* ── Salida hacia la portada ─────────────────────────────────────────────── */
.rs-cinema.is-leaving { animation: rs-film-exit .78s var(--film-ease) both; pointer-events: none; }
.rs-cinema.is-leaving::backdrop { background: transparent; }
.rs-film-revealed .rs-mk-hero-copy, .rs-film-revealed .rs-mk-hero-visual { animation: rs-film-page 1.1s var(--rs-ease-out,ease) both; }
.rs-film-revealed .rs-mk-hero-visual { animation-delay: .1s; }
/* El cohete del hero es decoración: flota en la esquina y no ocupa lugar en el flujo.
   (Vivía en rs-cinema-immersive.css; sin estas reglas se muestra a 640 px y empuja el hero.) */
.rs-mk-launch-mark { position: absolute; width: 135px; height: auto; top: -48px; right: 6%; z-index: 4; pointer-events: none; filter: drop-shadow(0 15px 20px #7645ef15); }
.rs-film-revealed .rs-mk-launch-mark { animation: rs-film-launch-arrive 1.15s cubic-bezier(.16,1,.3,1) .1s both; }
@keyframes rs-film-launch-arrive { from { opacity: 0; translate: -35px 35px; scale: .7; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (max-width: 640px) { .rs-mk-launch-mark { width: 80px; top: -28px; right: 4%; } }
@media (prefers-reduced-motion: reduce) { .rs-film-revealed .rs-mk-launch-mark { animation: none; } }
.rs-cinema-replay { display: inline-flex; gap: 10px; align-items: center; border: 1px solid #7645ef33; border-radius: 50px; padding: 12px 18px; font: inherit; font-size: 13px; color: #7645ef; background: #f4eeff; cursor: pointer; }
.rs-cinema-replay[hidden] { display: none; }
.rs-cinema-replay small { font-size: 10px; opacity: .7; }
.rs-cinema-replay span { font-size: 24px; line-height: 1; }

@keyframes rs-film-exit { to { opacity: 0; transform: scale(1.04); } }
@keyframes rs-film-page { from { opacity: .2; transform: translateY(30px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rs-film-eq { from { height: 3px; } to { height: 14px; } }
@keyframes rs-film-call { 0% { box-shadow: 0 0 0 0 #7645ef77; } 100% { box-shadow: 0 0 0 16px #7645ef00; } }

/* ── Botón flotante de WhatsApp (portada) ──────────────────────────────────
   Abajo a la izquierda. Nunca se ve con la presentación: ni mientras está la
   pantalla de carga (html.rs-film-pending / .is-on) ni con el film abierto. Sin
   :has() igual queda tapado: la carga va con z-index 99999 y el <dialog> en la
   top layer. Al cerrar el film entra con la transición. */
.rs-wsp-fab {
    position: fixed; z-index: 9990; box-sizing: border-box;
    left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom));
    /* Redondo en reposo (15 + 30 + 15 = 60 px): la etiqueta no ocupa nada hasta el hover. */
    display: inline-flex; align-items: center; justify-content: center; height: 60px; min-width: 60px; padding: 0 15px;
    border-radius: 999px; background: #7645ef; color: #fff; text-decoration: none;
    font: 600 15px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow: 0 12px 30px -8px rgba(118, 69, 239, .6), 0 2px 6px rgba(24, 17, 45, .14);
    transition: opacity .45s cubic-bezier(.2,.75,.15,1), transform .45s cubic-bezier(.2,.75,.15,1), visibility .45s, background .2s, box-shadow .2s;
    animation: rs-wsp-in .6s cubic-bezier(.2,.9,.3,1.3) .4s backwards;
}
.rs-wsp-fab svg { flex: 0 0 30px; }
.rs-wsp-fab-label { max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s cubic-bezier(.2,.75,.15,1), margin-left .35s cubic-bezier(.2,.75,.15,1), opacity .25s ease; }
.rs-wsp-fab:hover, .rs-wsp-fab:focus-visible { color: #fff; background: #6534e0; box-shadow: 0 16px 36px -8px rgba(118, 69, 239, .7), 0 2px 6px rgba(24, 17, 45, .16); }
.rs-wsp-fab:focus-visible { outline: 3px solid #b997ff; outline-offset: 4px; }
/* Al hover se ensancha y aparece «¿Hablamos?». En táctil no hay hover: queda redondo. */
@media (hover: hover) {
    .rs-wsp-fab:hover .rs-wsp-fab-label, .rs-wsp-fab:focus-visible .rs-wsp-fab-label { max-width: 120px; margin-left: 10px; opacity: 1; }
}
html.rs-film-pending .rs-wsp-fab,
body:has(.rs-film-loader.is-on) .rs-wsp-fab,
body:has(#rs-cinema[open]) .rs-wsp-fab { opacity: 0; visibility: hidden; transform: translateY(16px) scale(.8); pointer-events: none; }
@media (max-width: 640px) {
    .rs-wsp-fab { height: 54px; min-width: 54px; padding: 0 12px; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); }
}
@keyframes rs-wsp-in { from { opacity: 0; transform: translateY(16px) scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rs-wsp-fab { animation: none; transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   PANTALLA DE CARGA DE LA PRESENTACIÓN
   Lo que se ve mientras bajan el logo, la captura del panel y el video.
   Vive fuera del <dialog> a propósito: se pinta antes de que exista la
   presentación. El <dialog> modal va a la top layer, así que apenas abre
   queda POR ENCIMA de esta pantalla sin importar el z-index: se abre el
   video y la pantalla se desvanece detrás, sin destello.
   Estado: la clase .rs-film-pending del <html> la enciende antes del primer
   pintado (RESTSAAS_Core::film_boot_head) y .is-on la usa el botón «Conocé
   Rapify» cuando la presentación ya se vio y la vuelve a abrir.
   ═══════════════════════════════════════════════════════════════════════ */
.rs-film-loader {
    --loader-ink: #18112d; --loader-purple: #7645ef; --loader-muted: #756b84;
    --loader-ease: cubic-bezier(.2,.75,.15,1);
    position: fixed; inset: 0; z-index: 99999; display: flex;
    align-items: center; justify-content: center;
    background: #f7f4fd; color: var(--loader-ink); overflow: hidden;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .45s var(--loader-ease), visibility .45s;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html.rs-film-pending .rs-film-loader, .rs-film-loader.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
/* Refuerzo del arranque: mientras la clase está puesta, la portada no se ve. La pantalla
   de carga se imprime en wp_body_open y, si el tema no lo llama, en el shortcode del hero
   — o sea, unas líneas más abajo del navbar. Sin esto, un pintado a mitad del HTML
   mostraría la página antes de que llegue la pantalla. :has() para que, si algún día el
   shortcode no llegara a imprimirla, la página no quede tapada. */
html.rs-film-pending:has(.rs-film-loader) body > *:not(.rs-film-loader) { visibility: hidden; }
.rs-film-loader-grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(#7645ef0a 1px, transparent 1px),linear-gradient(90deg,#7645ef0a 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(transparent,#000,transparent); }
.rs-film-loader-halo { position: absolute; width: 75vw; height: 75vw; right: -18vw; top: -24vw; border-radius: 50%; background: radial-gradient(circle,#bb9aff55,#d6c3ff22 48%,transparent 68%); }
.rs-film-loader-content { position: relative; text-align: center; padding: 40px 24px; max-width: 440px; width: 92%; }
.rs-film-loader-brand { display: block; width: 130px; height: auto; margin: 0 auto 30px; }
.rs-film-loader-spinner { position: relative; width: 70px; height: 70px; margin: 0 auto 32px; border: 1px solid #b391e72e; border-top-color: var(--loader-purple); border-radius: 50%; box-shadow: 0 0 0 12px #9f73eb09,0 0 0 25px #9f73eb06; animation: rs-film-loader-orbit 2s linear infinite; }
.rs-film-loader-spinner::before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #9760ef; left: 4px; top: 7px; box-shadow: 0 0 16px #9662ef80; }
.rs-film-loader-spinner::after { content: '✦'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: var(--loader-purple); animation: rs-film-loader-orbit 2s linear infinite reverse; }
.rs-film-loader-text { font-size: clamp(20px,2.3vw,26px); font-weight: 650; line-height: 1.3; letter-spacing: -.045em; color: var(--loader-ink); }
.rs-film-loader-subtext { margin-top: 12px; font-size: 12px; line-height: 1.7; color: var(--loader-muted); }
.rs-film-loader-rail { margin: 26px auto 0; width: 130px; height: 2px; border-radius: 4px; background: #e5dcf3; overflow: hidden; }
.rs-film-loader-rail::after { content: ''; display: block; width: 45%; height: 100%; background: var(--loader-purple); animation: rs-film-loader-sweep 1.8s ease-in-out infinite; }
.rs-film-loader-caption { margin-top: 22px; font-size: 8px; letter-spacing: .2em; color: #a696b6; }
.rs-film-loader-skip { display: inline-block; margin-top: 26px; background: transparent; border: 1px solid #21123825; border-radius: 50px; padding: 12px 18px; font: inherit; font-size: 12px; color: var(--loader-ink); cursor: pointer; transition: background .2s,transform .25s var(--loader-ease); }
.rs-film-loader-skip:hover { background: #fff; transform: translateY(-2px); }
.rs-film-loader-skip:active { transform: scale(.97); }
.rs-film-loader-skip span { margin-left: 18px; }
.rs-film-loader-skip:focus-visible { outline: 3px solid var(--loader-purple); outline-offset: 5px; }
@keyframes rs-film-loader-orbit { to { transform: rotate(360deg); } }
@keyframes rs-film-loader-sweep { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@media (max-width: 640px) {
    .rs-film-loader-brand { width: 108px; margin-bottom: 24px; }
    .rs-film-loader-spinner { width: 56px; height: 56px; margin-bottom: 26px; }
    .rs-film-loader-spinner::after { font-size: 24px; }
    .rs-film-loader-content { padding: 32px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .rs-film-video, .rs-film-top, .rs-film-bottom { transition: none; }
    .rs-cinema.is-leaving { animation: none; }
    .rs-film-sound:not(.is-on), .rs-film-loader-spinner, .rs-film-loader-spinner::after, .rs-film-loader-rail::after, .rs-film-sound.is-on .rs-film-sound-bars i { animation: none; }
}