/* Tótems E02/E03 (Blazor Server). Mismo lenguaje visual que la PWA E01: IA / futuro / tecnológico — fondo aurora, glass, glow neón, transiciones. OJO: este archivo se carga en TODAS las páginas Server (incl. backoffice), por eso el diseño va SCOPEADO a .e02 / .e03 y NO se toca el global. */ :root { --color-fondo: #0A1628; --color-acento: #E5392A; --color-texto: #FFFFFF; --k-bg-0: #060C18; --k-bg-1: #0A1628; --k-accent: #E5392A; --k-accent-2: #B7271C; --k-accent-3: #1FA6C4; --k-grad: linear-gradient(135deg, #E5392A 0%, #C62A1E 55%, #B7271C 100%); --k-surface: rgba(255, 255, 255, .05); --k-border: rgba(255, 255, 255, .11); --k-text: #EAF2FB; --k-dim: #93A6C0; --k-r: 18px; --k-ease: cubic-bezier(.22, 1, .36, 1); --k-glow: 0 0 40px rgba(229, 57, 42, .28); } html, body { margin: 0; padding: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--color-fondo); color: var(--color-texto); overflow: hidden; user-select: none; } .totem-shell { display: flex; align-items: center; justify-content: center; height: 100vh; } .totem-home { text-align: center; } .totem-home h1 { color: var(--k-accent); font-size: 3rem; } .totem-hint { opacity: .6; font-size: .9rem; } /* ── Fondo aurora animado (scopeado a los tótems) ─────────────────────────── */ .e02, .e03 { position: relative; height: 100dvh; /* FULL-BLEED: el fondo aurora ocupa TODO el ancho del viewport (antes el contenedor quedaba más angosto y el body plano asomaba a los lados → se veía un "cuadro"/doble borde vertical). */ width: 100vw; margin-inline: calc(50% - 50vw); overflow-y: auto; scrollbar-width: none; /* sin barra fea (el contenido cabe por diseño) */ -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; background: radial-gradient(120% 90% at 12% 8%, rgba(229, 57, 42, .16), transparent 55%), radial-gradient(120% 90% at 88% 92%, rgba(183, 39, 28, .18), transparent 55%), linear-gradient(160deg, var(--k-bg-1) 0%, var(--k-bg-0) 100%); isolation: isolate; } .e02::before, .e03::before { content: ""; position: fixed; inset: -20% -10%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(229, 57, 42, .20), transparent) 15% 20% / 44vmax 44vmax no-repeat, radial-gradient(closest-side, rgba(183, 39, 28, .20), transparent) 85% 78% / 48vmax 48vmax no-repeat, radial-gradient(closest-side, rgba(34, 245, 200, .10), transparent) 60% 12% / 32vmax 32vmax no-repeat; animation: k-drift 28s var(--k-ease) infinite alternate; } .e02::after, .e03::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%); } @keyframes k-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2.5%,-2%,0) scale(1.06); } 100% { transform: translate3d(-2%,2.5%,0) scale(1.02); } } .e02::-webkit-scrollbar, .e03::-webkit-scrollbar { width: 0; height: 0; } @keyframes k-in { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: none; } } @keyframes k-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ── Layout de fase (tótem VERTICAL: AIO 23.8" portrait 1080×1920, o 43" portrait). Llena el ancho y el alto; tamaños con unidades de viewport para escalar en cualquier pantalla portrait. Sin scroll (el contenido cabe). ──────────────────────────────── */ .e02 { padding: 1.4vh 3vw 2vh; display: flex; flex-direction: column; color: var(--k-text); } .e03 { color: var(--k-text); display: flex; flex-direction: column; } /* Sin borde de foco feo en los títulos. pone tabindex=-1 y enfoca el h1 al navegar → el navegador dibuja su anillo (:focus-visible). Un h1 nunca es interactivo, así que se quita el outline en CUALQUIER h1 (no solo bajo .e02/.e03, porque las fases de E03 usan otros contenedores). */ h1:focus, h1:focus-visible, .e02-centro:focus, .e03-centro:focus { outline: none; } .e02-centro, .e02-experto, .e03-centro { position: relative; z-index: 1; animation: k-in .5s var(--k-ease) both; } .e02-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2.4vh; } /* Anclado ARRIBA (no centrado): así el header y el video quedan en una posición FIJA y lo que cambia de alto (controles/botón/texto) crece hacia abajo SIN mover ni redimensionar el video. Además recupera el hueco que el centrado dejaba arriba. */ .e02-experto { justify-content: flex-start; } /* Imagen/video del experto: grande pero deja espacio para los controles debajo. */ .e02-presenter { height: 44vh; border-radius: 1.2rem; overflow: hidden; position: relative; } /* Velo negro para el cambio ENTRE expertos: se funde encima (0.55s), se cambia de experto por debajo y se desvanece revelando el nuevo video 1 → fundido a negro elegante, sin corte brusco. También tapa cualquier micro-destello de carga del nuevo experto. */ .e02-veil { position: absolute; inset: 0; z-index: 10; background: #000; opacity: 0; pointer-events: none; transition: opacity .55s cubic-bezier(.4, 0, .2, 1); } .e02-veil.on { opacity: 1; } /* Pregunta (video) y consejo: el video es 9:16 igual que la pantalla → el presenter se hace una caja 9:16 casi a pantalla completa para que el video (y sus subtítulos al pie) se vean grandes. Ancho derivado del alto por aspect-ratio; centrado. min() evita que el ancho supere el del contenedor en pantallas anchas. */ /* MISMO tamaño en los 3 sub-pasos (el video no cambia de tamaño, solo hace crossfade). 9:16 centrado; alto acotado para que quepan header + controles/botón SIN scroll en 1080x1920. */ .e02-presenter.e02-presenter-fijo { height: min(68vh, calc(94vw * 16 / 9)); aspect-ratio: 9 / 16; width: auto; max-width: 100%; align-self: center; flex-shrink: 0; /* NUNCA se encoge: el tamaño del video es constante en los 3 sub-pasos */ /* El fundido ENTRE expertos lo da el fade-in de la capa de video (e02CapaIn): al recrearse el presenter (@key por experto), el nuevo video 1 entra fundido desde negro, suave y sin zoom. */ } /* Capas superpuestas del presenter: crossfade elegante entre video-pregunta, video-2 e imagen. */ /* Crossfade entre sub-pasos SOLO por opacidad, largo y muy suave. SIN z-index: la capa que entra ya va después en el DOM (video 1→2→3) → queda arriba de la saliente sin tapar los overlays (pelotitas "Pensando", ondas, subtítulos, Power Skill, que van después en el DOM). */ .e02-capa { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1); will-change: opacity; } .e02-capa.e02-capa-on { opacity: 1; } /* Ondulador de voz sobrepuesto al presenter (reacciona al TTS del experto). */ .voz-onda { display: block; width: 100%; height: clamp(52px, 9vh, 130px); margin-top: .6rem; } /* Onda del micrófono FINA al responder (ocupa el menor alto posible). */ .voz-onda-fina { height: clamp(22px, 3.5vh, 48px); margin-top: .3rem; } /* Controles de respuesta en 2 columnas: IZQ toggles apilados, DER celda de acción (botón o input). */ .e02-responder { display: flex; flex-direction: row; gap: .8rem; width: 100%; max-width: min(94vw, 1000px); margin: 0 auto; align-items: stretch; } .e02-resp-modo { display: flex; flex-direction: column; gap: .5rem; flex: 0 0 auto; } .e02-resp-modo .e02-toggle { flex: 1; white-space: nowrap; } .e02-resp-accion { flex: 1; display: flex; } .e02-resp-accion > * { flex: 1; width: 100%; } .e02-resp-accion .e02-hablar { width: 100%; height: 100%; margin: 0; } .e02-input-row { display: flex; gap: .6rem; align-items: stretch; } .e02-input-row .e02-input { flex: 1; margin: 0; } .e02-enviar { flex: 0 0 auto; width: clamp(58px, 9vh, 88px); border: none; border-radius: 1rem; background: linear-gradient(135deg, #00e5ff, #B7271C); color: #ffffff; font-size: clamp(1.5rem, 3.4vh, 2.2rem); font-weight: 800; cursor: pointer; display: grid; place-items: center; line-height: 1; } .e02-enviar:disabled { opacity: .4; cursor: default; } /* Consejo del experto mostrado como SUBTÍTULO (centrado, alto contraste sobre la imagen). */ .e02-subtitulo { text-align: center; color: #fff; font-weight: 600; font-size: clamp(1.15rem, 2.5vh, 2rem); line-height: 1.35; text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,1); margin: .4rem auto 1rem; max-width: 92%; } /* Fade suave del video → imagen estática (consejo): evita el corte brusco. */ .e02-fade-imagen { animation: e02FadeImagen .8s ease both; } @keyframes e02FadeImagen { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } } /* Subtítulos por TROZOS de ~2 líneas que se REEMPLAZAN (tipo película), no que se acumulen. Contenedor de alto fijo (~2 líneas) para no mover el layout; cada trozo hace fade-in a su animation-delay y el siguiente (más abajo en el DOM → pintado encima) lo tapa. */ .e02-sub-wrap { position: relative; min-height: clamp(3.2rem, 7.5vh, 5.6rem); } /* Cada trozo APARECE, se mantiene y DESAPARECE dentro de su ventana (delay+duration); el siguiente arranca cuando el anterior ya se borró → nunca dos a la vez (tipo subtítulo de película). */ .e02-sub-chunk { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; opacity: 0; animation-name: subChunk; animation-timing-function: ease; animation-fill-mode: both; } @keyframes subChunk { 0% {opacity:0} 7% {opacity:1} 86% {opacity:1} 100% {opacity:0} } /* El último trozo aparece y se QUEDA (no se borra antes de que termine el audio). */ .e02-sub-chunk-fin { animation-name: subChunkFin; } @keyframes subChunkFin { 0% {opacity:0} 7% {opacity:1} 100% {opacity:1} } /* Efecto "Pensando…" sobre la imagen mientras la IA prepara la respuesta (no queda congelada). */ .e02-pensando { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .e02-pensando-scan { position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: linear-gradient(180deg, transparent, rgba(0,229,255,.18) 45%, rgba(183, 39, 28,.18) 55%, transparent); animation: pensandoScan 1.9s ease-in-out infinite; } @keyframes pensandoScan { 0% { top: -40%; } 100% { top: 100%; } } /* Solo 3 bolitas rebotando, bien al pie del video, SIN caja ni borde. */ .e02-pensando-badge { position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: .7rem; } .e02-pensando-badge i { width: .85rem; height: .85rem; border-radius: 50%; background: #00e5ff; display: inline-block; animation: pensandoDot 1.1s ease-in-out infinite; box-shadow: 0 0 14px rgba(0,229,255,.75); } .e02-pensando-badge i:nth-child(2) { animation-delay: .18s; } .e02-pensando-badge i:nth-child(3) { animation-delay: .36s; } @keyframes pensandoDot { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } .e03-centro { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem; text-align: center; padding: 1.5rem; } /* ── Títulos con gradiente ────────────────────────────────────────────────── */ .e02 h1, .e03 h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: -.4px; margin: 0; background: linear-gradient(120deg, #fff 25%, var(--k-accent) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; } .e02-experto-head h2 { margin: 0; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; background: linear-gradient(120deg, #fff 30%, var(--k-accent) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Input de código ──────────────────────────────────────────────────────── */ .e02-codigo-input { font-size: 3rem; text-align: center; letter-spacing: .8rem; width: 300px; max-width: 80vw; text-transform: uppercase; padding: 1rem 1.25rem; border-radius: var(--k-r); border: 2px solid var(--k-border); background: var(--k-surface); color: #fff; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .e02-codigo-input::placeholder { color: rgba(255,255,255,.25); } .e02-codigo-input:focus { border-color: var(--k-accent); background: rgba(255,255,255,.08); box-shadow: 0 0 0 5px rgba(229, 57, 42,.14), var(--k-glow); } /* ── Ingreso de código ENRIQUECIDO (E03: momento culminante) ─────────────────── */ .e02-entry { gap: 2.1vh; } .e02-entry h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.05; } /* Insignia sobre el título */ .e02-entry-pill { font-size: clamp(.8rem, 1.35vw, 1.15rem); letter-spacing: .16em; text-transform: uppercase; color: var(--k-accent); background: rgba(229, 57, 42,.1); border: 1px solid rgba(229, 57, 42,.35); border-radius: 999px; padding: .55vh 1.7vw; } /* Ícono héroe dentro de un aro luminoso que respira */ .e02-entry-hero { width: clamp(96px, 12vw, 168px); height: clamp(96px, 12vw, 168px); border-radius: 50%; display: grid; place-items: center; font-size: clamp(2.8rem, 5.2vw, 4.6rem); background: radial-gradient(circle at 50% 40%, rgba(229, 57, 42,.24), rgba(183, 39, 28,.12) 68%, transparent 78%); border: 2px solid rgba(229, 57, 42,.4); box-shadow: 0 0 42px rgba(229, 57, 42,.35), inset 0 0 34px rgba(229, 57, 42,.16); animation: e02HeroPulse 2.8s ease-in-out infinite; filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); } .e02-entry-hero span { animation: flotar 3.2s ease-in-out infinite; } @keyframes e02HeroPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 42px rgba(229, 57, 42,.3), inset 0 0 34px rgba(229, 57, 42,.14); } 50% { transform: scale(1.045); box-shadow: 0 0 64px rgba(229, 57, 42,.55), inset 0 0 44px rgba(229, 57, 42,.22); } } /* Subtítulo */ .e02-entry-sub { color: var(--k-dim); font-size: clamp(1.05rem, 1.9vw, 1.65rem); max-width: 30ch; margin: 0 auto; line-height: 1.4; text-align: center; } /* ── Botones ──────────────────────────────────────────────────────────────── */ .btn-kiosk { position: relative; min-height: 78px; min-width: 220px; font-size: 1.35rem; font-weight: 700; border: none; border-radius: var(--k-r); background: var(--k-grad); color: #ffffff; cursor: pointer; padding: 1rem 2rem; box-shadow: 0 12px 34px rgba(183, 39, 28,.35); transition: transform .12s var(--k-ease), box-shadow .2s, filter .2s; } .btn-kiosk:hover:not(:disabled) { filter: brightness(1.06); } .btn-kiosk:active:not(:disabled) { transform: scale(.97); } .btn-kiosk:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; } .btn-kiosk-secundario { background: var(--k-surface); color: var(--k-text); border: 1.5px solid var(--k-border); box-shadow: none; font-weight: 600; } .btn-kiosk-secundario:hover:not(:disabled) { filter: none; border-color: var(--k-accent); } /* Vista de cámara para escanear el QR del código. */ .qr-video { width: min(80vw, 560px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.2rem; background: #000; transform: scaleX(-1); border: 2px solid var(--k-accent); box-shadow: var(--k-glow); } /* Botón discreto de reinicio de etapa (para el monitor). Poco visible, se resalta al pasar. */ .totem-reiniciar { position: fixed; top: 1.4vh; right: 1.4vw; z-index: 20; font-size: .95rem; font-weight: 600; color: var(--k-dim); background: rgba(255, 255, 255, .06); border: 1px solid var(--k-border); border-radius: 999px; padding: .5rem 1.1rem; cursor: pointer; opacity: .45; transition: opacity .2s, color .2s, border-color .2s; } .totem-reiniciar:hover { opacity: 1; color: var(--k-text); border-color: var(--k-accent); } .e02-hint { color: var(--k-dim); font-size: .95rem; max-width: 60ch; } .e02-error { color: #ff6b6b; font-weight: 600; } /* ── Cabecera del experto ─────────────────────────────────────────────────── */ .e02-experto { display: flex; flex-direction: column; gap: 1rem; flex: 1; } .e02-experto-head { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 1; background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-r); padding: .85rem 1.1rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .e02-avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; background: var(--k-grad); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; color: #ffffff; box-shadow: var(--k-glow); } .e02-intel { color: var(--k-dim); font-size: .9rem; } .e02-progreso { margin-left: auto; font-size: 1rem; font-weight: 700; color: var(--k-accent); background: rgba(229, 57, 42,.1); border: 1px solid rgba(229, 57, 42,.3); padding: .35rem .8rem; border-radius: 999px; } .e02-mute { background: transparent; border: none; font-size: 1.6rem; cursor: pointer; } /* Reiniciar dentro del header (monitor): botón redondo discreto junto al mute. */ .e02-reiniciar-head { flex: none; background: rgba(255,255,255,.06); border: 1px solid var(--k-border); color: var(--k-dim); border-radius: 999px; width: 2.4rem; height: 2.4rem; font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: .6; transition: opacity .2s, color .2s, border-color .2s; } .e02-reiniciar-head:hover { opacity: 1; color: var(--k-text); border-color: var(--k-accent); } /* ── Modo voz/texto ───────────────────────────────────────────────────────── */ .e02-modo { display: flex; gap: .6rem; justify-content: center; } .e02-toggle { padding: .65rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--k-border); background: var(--k-surface); color: #fff; font-size: 1rem; cursor: pointer; transition: all .2s; } .e02-toggle.on { border-color: var(--k-accent); background: rgba(229, 57, 42,.16); color: #fff; box-shadow: var(--k-glow); } /* ── Burbujas / entrada ───────────────────────────────────────────────────── */ .e02-burbuja { padding: 1.25rem 1.5rem; border-radius: var(--k-r); font-size: 1.25rem; line-height: 1.5; animation: k-reveal .4s var(--k-ease) both; } .e02-burbuja-experto { background: var(--k-surface); border: 1px solid var(--k-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .e02-input { font-size: 1.2rem; padding: 1rem 1.15rem; border-radius: var(--k-r); border: 1.5px solid var(--k-border); background: var(--k-surface); color: #fff; resize: none; outline: none; transition: border-color .2s, box-shadow .2s; } .e02-input:focus { border-color: var(--k-accent); box-shadow: 0 0 0 4px rgba(229, 57, 42,.12); } /* ── Escala para tótem VERTICAL grande (fase de conversación E02) ───────────── Sobre-escribe los tamaños base (pensados para pantallas chicas) con unidades de viewport, para llenar el alto y verse a distancia SIN scroll. */ .e02-experto { gap: 1.8vh; } .e02-experto-head { padding: 1.4vh 1.6vw; gap: 1.6vw; } .e02-experto-head h2 { font-size: clamp(1.8rem, 3.4vw, 3.4rem); } .e02-avatar { width: clamp(60px, 5.5vw, 104px); height: clamp(60px, 5.5vw, 104px); font-size: clamp(1.4rem, 2.8vw, 2.4rem); } .e02-intel { font-size: clamp(1rem, 1.5vw, 1.5rem); } .e02-progreso { font-size: clamp(1rem, 1.5vw, 1.5rem); padding: .5vh 1.1vw; } .e02-mute { font-size: clamp(1.6rem, 2.8vw, 2.8rem); } .btn-kiosk { min-height: clamp(64px, 7.5vh, 120px); font-size: clamp(1.35rem, 2.2vw, 2.3rem); } .e02-modo { gap: 1.2vw; } /* Badges Voz/Texto MÁS CHICOS */ .e02-toggle { font-size: clamp(.85rem, 1.35vw, 1.35rem); padding: .8vh 1.3vw; } /* Input de texto MÁS CHICO */ .e02-input { font-size: clamp(.95rem, 1.5vw, 1.4rem); min-height: 5.5vh; padding: .9vh 1.2vw; } /* Botón "Mantén presionado" MÁS CHICO (sin agrandar los demás btn-kiosk). Selector con más especificidad (.e02-resp-accion .e02-hablar) para ganarle a la media query de .btn-kiosk que va más abajo en el archivo. */ .e02-resp-accion .e02-hablar { min-height: clamp(46px, 5.4vh, 82px); font-size: clamp(.95rem, 1.5vw, 1.55rem); touch-action: none; } /* Botón enviar (➤) acorde al input más chico */ .e02-enviar { width: clamp(48px, 6.5vh, 72px); font-size: clamp(1.2rem, 2.6vh, 1.8rem); } .e02-hint { font-size: clamp(1rem, 1.6vw, 1.5rem); max-width: 70ch; margin: 0 auto; text-align: center; } /* "El experto está hablando…": texto vivo (no un botón), latido suave mientras suena la voz. */ .e02-hablando { color: var(--k-accent); font-weight: 600; animation: k-latido 1.6s ease-in-out infinite; } @keyframes k-latido { 0%,100% { opacity: .55; } 50% { opacity: 1; } } /* Tarjeta Power Skill al PIE del video (aparece al terminar la respuesta): título + nombre, sin descripción → chica y traslúcida, no tapa el video. */ .e02-powerskill { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; padding: 1.6vh 5% 2vh; background: linear-gradient(0deg, rgba(4,10,18,.82) 0%, rgba(4,10,18,.5) 70%, transparent 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: k-reveal .5s var(--k-ease) both; z-index: 2; } .e02-powerskill-titulo { color: var(--k-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(.8rem, 1.3vw, 1.25rem); } .e02-powerskill-nombre { color: #fff; font-weight: 800; font-size: clamp(1.15rem, 2vw, 2.1rem); line-height: 1.15; } /* ── Power Skills ─────────────────────────────────────────────────────────── */ .e02-skill { display: flex; flex-direction: column; gap: .25rem; background: rgba(229, 57, 42,.1); border: 1px solid rgba(229, 57, 42,.28); border-left: 4px solid var(--k-accent); padding: 1rem 1.25rem; border-radius: 14px; animation: k-reveal .5s var(--k-ease) both; } .e02-skill-label { color: var(--k-accent); font-weight: 700; font-size: 1.15rem; } .e02-skill-tip { color: #cfe2f2; } .e02-sentimiento { color: var(--k-dim); } .e02-sentimiento strong { color: var(--k-accent); } .e02-skills-lista { display: flex; flex-direction: column; gap: .8rem; width: 100%; max-width: 580px; } .e02-generando { color: var(--k-accent); font-size: 1.3rem; font-weight: 600; filter: drop-shadow(0 0 14px rgba(229, 57, 42,.5)); } .e02-hablar.grabando { background: linear-gradient(135deg, #ff6b6b, #ff3d7f); color: #fff; } .e02-presenter { border: 1px solid var(--k-border); box-shadow: 0 20px 50px rgba(0,0,0,.4); } /* ── Selección del sabio: expertos en fila arriba + tarjeta de inteligencia abajo ── */ .e02-seleccion { flex: 1; display: flex; flex-direction: column; gap: 2.4vh; padding-top: 1vh; animation: k-in .5s var(--k-ease) both; } .e02-sel-head { text-align: center; } .e02-sel-head p { color: var(--k-dim); font-size: clamp(1rem, 1.7vw, 1.5rem); margin-top: .6rem; } .e02-sel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6vw; align-items: stretch; } .e02-sel-col { display: flex; flex-direction: column; gap: 1.6vh; } /* align-items:stretch → las 2 tarjetas de expertos de un grupo quedan de igual alto */ .e02-sel-fila { display: flex; justify-content: center; align-items: stretch; gap: 1vw; } .e02-tipo-creativa { color: #c4b5fd; background: rgba(139,92,246,.13); border: 1px solid rgba(139,92,246,.4); } .e02-tipo-analitica { color: #67e8f9; background: rgba(229, 57, 42,.11); border: 1px solid rgba(229, 57, 42,.4); } .e02-tipo-humana { color: #6ee7b7; background: rgba(16,185,129,.13); border: 1px solid rgba(16,185,129,.4); } .e02-sel-card { flex: 1; max-width: 49%; display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.2vh .5vw; background: transparent; border: 1.5px solid transparent; border-radius: 1rem; cursor: pointer; color: #fff; transition: transform .18s var(--k-ease), border-color .18s, background .18s; } .e02-sel-card:hover, .e02-sel-card:focus-visible { transform: translateY(-4px); border-color: var(--k-accent); background: rgba(229, 57, 42,.06); outline: none; } .e02-sel-foto { width: clamp(76px, 8.2vw, 148px); height: clamp(90px, 9.8vw, 176px); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.06); display: grid; place-items: center; border: 2px solid rgba(229, 57, 42,.35); box-shadow: 0 8px 22px rgba(0,0,0,.35); } .e02-sel-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .e02-sel-iniciales { font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 800; color: var(--k-dim); } /* Nombre: caja de alto FIJO (~2 líneas) → los nombres cortos y largos ocupan lo mismo, así todas las filas quedan iguales y las tarjetas de inteligencia debajo se alinean. */ .e02-sel-nombre { font-size: clamp(.92rem, 1.45vw, 1.35rem); font-weight: 700; text-align: center; line-height: 1.15; min-height: 2.4em; display: flex; align-items: center; justify-content: center; } /* Tarjeta descriptiva de la inteligencia (tinte por tipo con .e02-tipo-*). flex:1 → las 3 tarjetas quedan del mismo alto (arriba y abajo alineadas). */ .e02-sel-int { flex: 1; border-radius: 1.1rem; padding: 1.8vh 1.2vw; text-align: center; } .e02-sel-repr { display: block; font-size: clamp(.72rem, 1vw, .95rem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1vh; opacity: .95; } .e02-sel-int-ico { display: inline-grid; place-items: center; width: clamp(2.4rem, 3vw, 3.4rem); height: clamp(2.4rem, 3vw, 3.4rem); border-radius: .8rem; font-size: clamp(1.2rem, 1.8vw, 1.9rem); background: linear-gradient(135deg, #E5392A, #B7271C); box-shadow: 0 6px 18px rgba(229, 57, 42,.3); margin-bottom: 1vh; } .e02-sel-int-titulo { color: #fff; font-size: clamp(1.05rem, 1.7vw, 1.6rem); font-weight: 800; margin: 0 0 .6vh; } .e02-sel-int-desc { color: var(--k-dim); font-size: clamp(.85rem, 1.25vw, 1.15rem); line-height: 1.35; margin: 0; } /* ── Conversación: pregunta (grande) + chips SOLO ejemplos (no clickeables) ──── */ .e02-conversa { display: flex; flex-direction: column; gap: 1.3vh; width: 100%; max-width: min(94vw, 1000px); margin: 0 auto; } .e02-pregunta-txt { text-align: center; color: #fff; font-weight: 700; font-size: clamp(1.15rem, 2.3vh, 1.95rem); line-height: 1.22; margin: 0; } .e02-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .7vh .8vw; } .e02-chip { font-size: clamp(.8rem, 1.3vw, 1.15rem); font-weight: 600; color: #bfe6f5; padding: .7vh 1.4vw; border-radius: 999px; background: rgba(229, 57, 42,.07); border: 1px solid rgba(229, 57, 42,.22); cursor: default; /* son EJEMPLOS: no se puede hacer click, la persona habla o escribe */ } /* ── Resumen del paso 2 (tarjeta ordenada) + timer ─────────────────────────── */ .e02-resumen-card { display: flex; flex-direction: column; gap: 2vh; width: 100%; max-width: 920px; padding: 3vh 2.4rem; background: var(--k-surface); border: 1px solid var(--k-border); border-radius: 1.4rem; box-shadow: 0 20px 50px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: k-in .5s var(--k-ease) both; text-align: left; } .e02-resumen-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 1.4vh; } .e02-resumen-head h1 { font-size: clamp(1.3rem, 2.4vw, 2rem); margin: 0; } .e02-resumen-badge { flex: 0 0 auto; font-size: clamp(.8rem, 1.2vw, 1.05rem); font-weight: 700; color: #052e1f; background: linear-gradient(135deg, #34d399, #10b981); padding: .5vh 1.2vw; border-radius: 999px; } .e02-resumen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vh 1.2vw; } .e02-rdato-full { grid-column: 1 / -1; } .e02-rdato { display: flex; flex-direction: column; gap: .5vh; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: .9rem; padding: 1.4vh 1.2vw; } .e02-rlabel { color: var(--k-accent); font-size: clamp(.72rem, 1.05vw, .95rem); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .e02-rvalor { color: #fff; font-size: clamp(1rem, 1.55vw, 1.4rem); font-weight: 600; line-height: 1.25; } .e02-rvalor small { color: var(--k-dim); font-weight: 500; } .e02-rskills { display: flex; flex-wrap: wrap; gap: .6vh .6vw; } .e02-rskill { font-size: clamp(.8rem, 1.2vw, 1.1rem); font-weight: 700; color: #bfe6f5; padding: .5vh 1vw; border-radius: 999px; background: rgba(229, 57, 42,.12); border: 1px solid rgba(229, 57, 42,.3); } .e02-resumen-foot { display: flex; align-items: center; gap: 1rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.6vh; } .e02-foot-ico { font-size: clamp(1.4rem, 2.4vw, 2.2rem); flex: 0 0 auto; } .e02-resumen-foot p { color: var(--k-accent); font-size: clamp(.95rem, 1.4vw, 1.3rem); font-weight: 600; line-height: 1.35; margin: 0; } .e02-resumen-foot strong { color: #fff; } .e02-timer { color: var(--k-dim); font-size: clamp(.9rem, 1.4vw, 1.2rem); text-align: center; opacity: .8; margin: 0; } /* Link TEMPORAL de prueba entre etapas (quitar en producción) */ .e02-test-link { align-self: center; color: var(--k-dim); font-size: clamp(.85rem, 1.2vw, 1.1rem); text-decoration: underline; opacity: .7; } .e02-test-link:hover { color: var(--k-accent); opacity: 1; } /* ── E03 Gemelo ───────────────────────────────────────────────────────────── */ /* Contenedor de la cámara: grande, con la cuenta regresiva SOBRE el video. */ .e03-cam-wrap { position: relative; width: min(94vw, 760px); aspect-ratio: 3 / 4; max-height: 62vh; border-radius: var(--k-r); overflow: hidden; box-shadow: var(--k-glow); border: 3px solid rgba(229, 57, 42,.4); } .e03-video { width: 100%; height: 100%; object-fit: cover; background: #000; transform: scaleX(-1); } .e03-cuenta { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; font-size: clamp(9rem, 30vh, 22rem); font-weight: 800; line-height: 1; background: rgba(0,0,0,.25); color: #fff; text-shadow: 0 0 30px rgba(229, 57, 42,.9), 0 4px 20px rgba(0,0,0,.6); animation: pop .4s var(--k-ease); } @keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .e03-particulas { font-size: 4.5rem; animation: flotar 2.4s ease-in-out infinite; filter: drop-shadow(0 0 20px rgba(229, 57, 42,.5)); } @keyframes flotar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .e03-gemelo-nombre { font-size: clamp(1.4rem, 2.6vw, 2.2rem); margin: 0; } /* Marco de tamaño FIJO: aparece de una (no colapsa a una línea) y aloja el loader + la imagen. */ .e03-gemelo-frame { position: relative; width: min(82vw, 480px); aspect-ratio: 1 / 1; max-height: 60vh; border-radius: var(--k-r); overflow: hidden; background: #060C18; border: 3px solid rgba(229, 57, 42,.35); box-shadow: 0 24px 60px rgba(0,0,0,.5), var(--k-glow); animation: k-in .5s var(--k-ease) both; } .e03-gemelo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #060C18; opacity: 0; transition: opacity 1s ease; } .e03-gemelo.cargado { opacity: 1; } /* Loader de anillos (igual espíritu que el de Etapa 1) mientras carga la imagen. */ .e03-cargando { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem; color: var(--k-accent); transition: opacity .4s ease; } .e03-cargando p { font-size: clamp(1rem, 1.8vw, 1.4rem); font-weight: 600; } .e03-cargando-core { position: relative; width: 110px; height: 110px; display: grid; place-items: center; } .e03-cargando-core span { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: #E5392A; border-right-color: rgba(229, 57, 42,.28); animation: e03spin 1.1s linear infinite; } .e03-cargando-core span:nth-child(2) { inset: 16px; border-top-color: #B7271C; border-right-color: rgba(183, 39, 28,.28); animation-duration: 1.8s; animation-direction: reverse; } .e03-cargando-core span:nth-child(3) { inset: 32px; border-top-color: #1FA6C4; animation-duration: 2.6s; } .e03-cargando-core i { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9df0ff, #C62A1E 55%, #B7271C); box-shadow: 0 0 26px rgba(229, 57, 42,.85); animation: e03pulse 1.3s ease-in-out infinite; } @keyframes e03spin { to { transform: rotate(360deg); } } @keyframes e03pulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.2); opacity: 1; } } @keyframes revelar { from { filter: brightness(0) blur(12px); transform: scale(1.04); } to { filter: none; transform: none; } } .e03-gemelo-mini { max-width: 260px; border-radius: 14px; border: 2px solid rgba(229, 57, 42,.35); box-shadow: var(--k-glow); } .e03-qr { width: 220px; height: 220px; background: #fff; padding: 12px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4); } /* Espacio RESERVADO del QR (tamaño fijo) → la interfaz no salta al aparecer. */ .e03-qr-box { width: 244px; height: 244px; display: grid; place-items: center; } /* Entrada suave y escalonada de la pantalla del QR (fade + leve subida). */ .qr-in { animation: qrIn .55s var(--k-ease) both; } @keyframes qrIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* El QR BAJA desde arriba con movimiento y un pequeño rebote de escala. */ .qr-baja { animation: qrBaja .9s var(--k-ease) both; animation-delay: .28s; } @keyframes qrBaja { from { opacity: 0; transform: translateY(-80px) scale(.82); } to { opacity: 1; transform: none; } } /* Marco del PASAPORTE en la fase QR de E03: iframe del pasaporte público (con su QR de descarga integrado). Sube desde abajo. Alto generoso para que se vea completo en la pantalla vertical del tótem. */ /* Fase del pasaporte: anclada ARRIBA (no centrada, así no queda un gran hueco sobre el título) y compacta, para que el marco use el máximo de alto. */ .e03-pasaporte-fase { justify-content: flex-start !important; gap: .7rem !important; padding: 1.6vh 1.2rem 1.4vh !important; } /* El marco CRECE para llenar el alto restante (flex:1) → el pasaporte se ve lo más completo posible en la pantalla vertical del tótem, sin alto fijo que deje hueco o recorte. */ .e03-pasaporte-frame { position: relative; width: min(94vw, 720px); flex: 1 1 auto; min-height: 0; align-self: center; border-radius: 20px; overflow: hidden; background: #060E1C; border: 1px solid rgba(229, 57, 42,.25); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 30px rgba(229, 57, 42,.15); animation: qrSube .9s var(--k-ease) both; animation-delay: .1s; } .e03-pasaporte-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .e03-pasaporte-frame .e03-gemelo-mini { width: 100%; height: 100%; object-fit: contain; } /* QR como CAPA de vidrio esmerilado sobre el pasaporte (el pasaporte usa TODO el alto detrás). Entra DESLIZANDO desde la derecha tras unos segundos, con fondo difuminado (backdrop-filter). */ .e03-qr-capa { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 1.3rem; padding: .9rem 1.3rem; border-radius: 18px; background: rgba(9, 18, 33, .5); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(229, 57, 42,.40); box-shadow: 0 20px 60px rgba(0,0,0,.55); opacity: 0; transform: translateX(75%); animation: qrCapaIn .85s var(--k-ease) 3s forwards; /* aparece a los ~3s, de derecha a izquierda */ } @keyframes qrCapaIn { to { opacity: 1; transform: translateX(0); } } .e03-qr-capa .e03-qr-mini { width: clamp(104px,12vh,140px); height: clamp(104px,12vh,140px); background: #fff; padding: 8px; border-radius: 12px; flex: none; } .e03-qr-capa span { font-size: clamp(1rem,1.6vh,1.25rem); color: var(--k-text); max-width: 20ch; line-height: 1.4; text-align: left; } @keyframes qrSube { from { opacity: 0; transform: translateY(90px) scale(.9); } to { opacity: 1; transform: none; } } /* ── Orientación / pantallas bajas ────────────────────────────────────────── */ @media (orientation: landscape), (max-height: 760px) { .e02 { padding: 1.25rem 1.25rem; } .btn-kiosk { min-height: 64px; font-size: 1.2rem; } .e02-codigo-input { font-size: 2.4rem; } .e03-cuenta { font-size: clamp(7rem, 22vh, 14rem); } .e02-presenter { height: 46vh !important; } } /* ── Accesibilidad ────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .e02::before, .e03::before, .e02-centro, .e02-experto, .e03-centro, .e02-burbuja, .e02-skill, .e03-cuenta, .e03-particulas, .e03-gemelo { animation: none !important; } } /* ── Marca: tipografía Poppins (títulos) — SCOPEADO a tótems, no toca backoffice ── */ @font-face{ font-family:'Poppins'; src:url('brand/Poppins-Bold.otf') format('opentype'); font-weight:700 800; font-style:normal; font-display:swap; } .e02 h1,.e03 h1,.totem-home h1,.e02-skill-label,.e03-gemelo-nombre{ font-family:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif; } /* Mismo tamaño que el logo de E01 (.hero-logo): dimensionado por ALTO con el mismo clamp. */ .totem-logo{height:clamp(58px,12dvh,120px);width:auto;display:block;margin:0 auto; filter:drop-shadow(0 6px 26px rgba(229,57,42,.30));} .totem-sponsors{width:min(60%,460px);height:auto;display:block;margin:0 auto;opacity:.9;}