/* ===================================================================== KALOS — Cine (prueba de diseño). Home como scroll narrativo a pantalla completa: una idea por pantalla, revelada con movimiento calmo (IntersectionObserver → .is-in). Usa las variables y fuentes del tema padre (site.css / theme.css). ===================================================================== */ body.kalos-cine { scroll-behavior: smooth; } /* --------------------------------------------------------------------- Snap scroll — DOS mecanismos que no conviven: · Desktop mouse/trackpad: snap.js (port del snap del padre) intercepta la rueda: 1 gesto = 1 panel, lock ~1s + dots laterales. Sin CSS snap. · Táctil / viewport angosto: fallback con CSS scroll-snap nativo; para eso scroll.js añade .cine-snap a SOLO cuando snap.js no corre. #resto es una sola área de snap más alta que el viewport → scroll libre. ------------------------------------------------------------------- */ @media (min-width: 561px) { /* proximity (no mandatory) + sin scroll-snap-stop: un panel más alto que el viewport (ej. la Solución en iPad mini) se puede recorrer entero sin que el snap atrape parte del contenido; igual "engancha" el inicio de cada sección al pasar cerca. */ html.cine-snap { scroll-snap-type: y proximity; scroll-behavior: smooth; } html.cine-snap .cine-panel { scroll-snap-align: start; } html.cine-snap .cine-resto { scroll-snap-align: start; } html.cine-snap .site-footer { scroll-snap-align: end; } } @media (prefers-reduced-motion: reduce) { html.cine-snap { scroll-behavior: auto; } } /* --------------------------------------------------------------------- Paneles narrativos ------------------------------------------------------------------- */ .cine-panel { position: relative; min-height: 100svh; display: flex; align-items: center; padding: clamp(6rem, 12vh, 9rem) 0 clamp(4rem, 9vh, 7rem); border-top: 1px solid var(--line); overflow: hidden; } .cine-panel:first-child { border-top: none; } .cine-inner { position: relative; z-index: 2; width: 80%; max-width: var(--maxw); margin: 0 auto; } /* Índice de etapa: (01) — La pregunta */ .cine-idx { display: inline-block; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acid); margin-bottom: 1.6rem; } /* Titular grande de cada etapa (tamaños contenidos, responsivos) */ .cine-h { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em; max-width: 15ch; } .cine-h em { font-style: normal; color: var(--acid); } /* Bajada / lead */ .cine-lead { font-family: var(--font-body); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--fg); max-width: 42ch; margin-top: 1.4rem; } .cine-lead strong { color: var(--acid); font-weight: 600; } .cine-note { font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.02em; color: var(--muted); margin-top: 2.2rem; padding-left: 1rem; border-left: 2px solid var(--brand); } /* Botonera */ .cine-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; } /* --------------------------------------------------------------------- 01 · Disparadora — pregunta centrada verticalmente, sin fondo de fotos: las frases son las protagonistas (la luz de .cine-light les da énfasis). ------------------------------------------------------------------- */ .cine-hook { align-items: center; } /* Titular disparador: reusa el look outline del hero del padre */ .cine-hook-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.95; letter-spacing: -0.03em; } .cine-hook-title .line { display: block; } .cine-hook-title .line > span { display: block; } /* Outline limpio: el stroke de webkit dibuja también los contornos internos del glifo (diagonales cruzadas en fuentes bold). Solución: pintar el stroke DEBAJO del relleno y rellenar con el color del fondo → solo queda el borde exterior de cada letra. */ .cine-hook-title .outline { -webkit-text-stroke: 3.5px var(--fg); color: var(--bg); paint-order: stroke fill; } .cine-hook-title { line-height: 1.02; } .cine-hook-title em { font-style: normal; color: var(--acid); } .cine-hook .cine-lead { color: #e7e7e2; } /* Indicador de scroll */ .cine-scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; z-index: 3; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .7rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); text-decoration: none; transition: opacity .3s; } .cine-scroll-cue:hover { opacity: .8; } /* Chevron dentro de un círculo ácido que rebota + anillo que pulsa hacia afuera: afordancia clara y llamativa de "se puede bajar". */ .cine-scroll-cue .cue-arrow { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--acid); color: var(--acid); font-size: 1.05rem; line-height: 1; animation: cineBob 1.5s var(--ease) infinite; } .cine-scroll-cue .cue-arrow::after { content: ''; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--acid); animation: cuePulse 1.8s ease-out infinite; } @keyframes cineBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @keyframes cuePulse { 0% { opacity: .7; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.6); } } /* --------------------------------------------------------------------- Intro (conectada al preloader del padre): buscador + typewriter. html.cine-boot mantiene la tablet fuera de escena y el texto oculto; scroll.js la quita al terminar el tipeo → todo entra en escena. ------------------------------------------------------------------- */ .cine-intro { position: fixed; inset: 0; z-index: 930; background: var(--bg); display: grid; place-items: center; transition: opacity .8s var(--ease), visibility .8s; } .cine-intro.is-done { opacity: 0; visibility: hidden; } .ci-search { display: flex; align-items: center; gap: .9rem; width: min(560px, 86vw); padding: 1rem 1.5rem; border-radius: 100px; background: #fff; color: #202124; font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.25rem); box-shadow: 0 18px 60px rgba(0,0,0,.5); } .ci-lens { flex: 0 0 auto; width: 18px; height: 18px; border: 2.5px solid #9aa0a6; border-radius: 50%; position: relative; } .ci-lens::after { content: ''; position: absolute; width: 8px; height: 2.5px; background: #9aa0a6; border-radius: 2px; bottom: -3px; right: -6px; transform: rotate(45deg); } .ci-caret { width: 2px; height: 1.2em; background: #202124; animation: mbCaret 1s steps(2, jump-none) infinite; } /* Estado "boot": tablet fuera de escena (entra al quitar la clase), texto de los paneles contenido. El scroll se bloquea por eventos (snap.js preventDefault con .cine-boot) — NO con overflow:hidden en , que rompe la propagación del scroll y el sticky del stage. */ html.cine-boot .cine-stage { --mb-y: 130vh; --mb-rx: 40deg; --mb-s: .55; } html.cine-boot .cine-panel.is-in [data-cine-in] { opacity: 0; transform: translateY(40px); } html.cine-boot .cine-light { opacity: 0; } /* --------------------------------------------------------------------- 02 · Problema ------------------------------------------------------------------- */ .cine-problem { background: var(--bg-2); } .cine-mirror { margin-top: 2.4rem; } .cine-mirror ul { list-style: none; display: grid; gap: 0; max-width: 60ch; } .cine-mirror li { display: flex; gap: 1rem; align-items: baseline; font-family: var(--font-body); font-size: clamp(1rem, 1.9vw, 1.35rem); color: var(--fg); padding: 1rem 0; border-top: 1px solid var(--line); } .cine-mirror li:last-child { border-bottom: 1px solid var(--line); } .cine-mirror li b { color: var(--acid); font-family: var(--font-mono); font-size: 0.8rem; flex: 0 0 auto; padding-top: .35em; } /* --------------------------------------------------------------------- 03 · Promesa (solución) ------------------------------------------------------------------- */ .cine-promise { background: var(--bg); } /* Garantías: filas con número, entrada escalonada ligada al scroll (is-in del panel): cada fila entra desde la izquierda con blur, como estela del viaje de la tablet, y su subrayado crece después. */ .cine-promise-row { margin-top: 2.4rem; border-top: 1px solid var(--line); max-width: 34rem; } .cine-p-item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline; padding: 1.05rem 0 1.15rem; opacity: 0; transform: translateX(-44px); filter: blur(6px); transition: opacity .8s var(--easeSmooth) calc(.25s + var(--i) * .18s), transform .8s var(--easeSmooth) calc(.25s + var(--i) * .18s), filter .8s var(--easeSmooth) calc(.25s + var(--i) * .18s); } .cine-promise.is-in .cine-p-item { opacity: 1; transform: none; filter: none; } .cine-p-item::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: linear-gradient(90deg, var(--acid), var(--line) 70%); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) calc(.5s + var(--i) * .18s); } .cine-promise.is-in .cine-p-item::after { transform: scaleX(1); } .cine-p-item .p-num { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; color: var(--acid); } .cine-p-item b { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.05; letter-spacing: -0.01em; } .cine-p-item .p-desc { display: block; margin-top: .4rem; font-family: var(--font-body); font-size: 0.94rem; line-height: 1.55; color: var(--muted); } /* Los 4 pasos del proceso (proc_* del padre): tira compacta con flechas */ .cine-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: 1.5rem; font-family: var(--font-mono); } .cine-step { display: inline-flex; align-items: baseline; gap: .45rem; } .cine-step:not(:last-child)::after { content: '→'; color: var(--acid); margin-left: .9rem; font-size: .8rem; } .cine-step .s-n { font-size: .68rem; letter-spacing: .1em; color: var(--acid); } .cine-step .s-t { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); } /* --------------------------------------------------------------------- 04 · CTA ------------------------------------------------------------------- */ .cine-cta { background: var(--bg-2); text-align: left; } .cine-cta .cine-h { max-width: 20ch; } /* --------------------------------------------------------------------- Reveal (movimiento calmo) ------------------------------------------------------------------- */ [data-cine-in] { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--easeSmooth), transform 1s var(--easeSmooth); } .cine-panel.is-in [data-cine-in] { opacity: 1; transform: none; } /* Escalonado por orden de aparición dentro del panel */ .cine-panel.is-in [data-cine-in]:nth-child(1) { transition-delay: .05s; } .cine-panel.is-in [data-cine-in]:nth-child(2) { transition-delay: .16s; } .cine-panel.is-in [data-cine-in]:nth-child(3) { transition-delay: .27s; } .cine-panel.is-in [data-cine-in]:nth-child(4) { transition-delay: .38s; } .cine-panel.is-in [data-cine-in]:nth-child(5) { transition-delay: .49s; } /* El botón flotante de WhatsApp ahora lo aporta el plugin "Kalos WhatsApp" (site-wide, clase .wa-float). Acá solo lo reposicionamos/fundimos en la home (más abajo, junto al widget de accesibilidad). */ /* ===================================================================== MacBook Pro flotante 3D — hilo conductor de la narrativa. Estados (data-mb-state en #cine-stage), sincronizados con el panel activo: error → disparadora (Chrome no encuentra tu-negocio.com) code → problema (la web se está construyendo: código) web → promesa (la web terminada, de frente) google → CTA (Google encontrando kalosmk.com) ===================================================================== */ /* Wrapper de la historia: limita hasta dónde vive la tablet. */ .cine-story { position: relative; } /* Stage: capa ABSOLUTA que cubre toda la historia (no ocupa flujo) con un hijo STICKY adentro (.cine-pin). El sticky queda pegado arriba mientras dura la historia y, al terminar el panel 04, el límite de .cine-story lo empuja hacia arriba → la tablet sale enmascarada por layout (sin fade, sin pisar los divs siguientes). Ojo: NO usar margen negativo en el sticky — reduce su caja de margen y anula la restricción del contenedor. EL VIAJE: la tablet recorre la pantalla con el scroll (como fortvega.com): cada estado define una pose (posición + rotación + escala) vía vars --mb-*; .tablet y .mb-shadow las consumen y transicionan 1.4s. */ /* IMPORTANTE (fix Safari/WebKit): sticky dentro de un padre ABSOLUTO no funciona en Safari (bug conocido) → la tablet se iba con el scroll y el panel de color la tapaba. Por eso el stage es un hijo STICKY de flujo directo de .cine-story (100svh + margen negativo para no ocupar lugar). Se queda pegado durante los 4 paneles; al entrar #resto (hoja z5, fondo sólido) lo cubre y sube pegado a su borde → máscara igual que antes. */ .cine-stage { position: sticky; top: 0; z-index: 4; height: 100svh; width: 100%; margin-bottom: -100svh; pointer-events: none; --mb-scale: 1; /* Curva del viaje: arranca GRANDE (como en hablemos), se achica en problema y solución, y vuelve a agrandarse al final. */ /* Pose por defecto (= estado error): grande, flotando a la derecha, desbordando el borde derecho sin pisar el texto. */ --mb-x: 28vw; --mb-y: 0vh; --mb-rx: 6deg; --mb-ry: -12deg; --mb-rz: 1deg; --mb-s: 1.5; } .cine-stage[data-mb-state="code"] { --mb-x: -24vw; --mb-y: 2vh; --mb-rx: 6deg; --mb-ry: 14deg; --mb-rz: -3deg; --mb-s: .95; } .cine-stage[data-mb-state="web"] { --mb-x: 26vw; --mb-y: -1vh; --mb-rx: 5deg; --mb-ry: -12deg; --mb-rz: 2deg; --mb-s: 1.2; } .cine-stage[data-mb-state="google"] { --mb-x: 30vw; --mb-y: 0vh; --mb-rx: 2deg; --mb-ry: -6deg; --mb-rz: 0deg; --mb-s: 1.5; } /* Modo juego: la tablet toma el centro, de frente y gigante. */ .cine-stage[data-mb-state="game"] { --mb-x: 0vw; --mb-y: 0vh; --mb-rx: 0deg; --mb-ry: 0deg; --mb-rz: 0deg; --mb-s: 1.55; } .cine-pin { position: relative; height: 100%; display: grid; place-items: center; perspective: 1800px; } /* --- Luz que acompaña el scroll ------------------------------------ Capa sticky detrás del texto (z1 < .cine-inner z2, > fondos de panel): un halo radial que se corre hacia el lado de la frase de cada panel y le da el énfasis. Posición por estado vía sibling del stage. Mismo patrón sticky-en-flujo que el stage (fix Safari). */ .cine-light { position: sticky; top: 0; z-index: 1; height: 100svh; margin-bottom: -100svh; pointer-events: none; --lx: 26%; --lo: .8; transition: opacity 1s var(--ease); } .cl-pin { position: relative; height: 100%; overflow: hidden; } .cl-pin::before { content: ''; position: absolute; width: 72vw; height: 72vw; left: var(--lx); top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acid) 13%, transparent) 0%, color-mix(in srgb, var(--acid) 5%, transparent) 34%, transparent 64%); filter: blur(50px); opacity: var(--lo); transition: left 1.4s var(--easeSmooth), opacity 1.4s var(--easeSmooth); } #cine-stage[data-mb-state="error"] ~ .cine-light { --lx: 26%; --lo: .85; } #cine-stage[data-mb-state="code"] ~ .cine-light { --lx: 74%; --lo: .8; } #cine-stage[data-mb-state="web"] ~ .cine-light { --lx: 26%; --lo: .9; } #cine-stage[data-mb-state="google"] ~ .cine-light { --lx: 30%; --lo: 1; } @media (max-width: 1440px) { .cine-stage { --mb-scale: .86; } } @media (max-width: 1180px) { .cine-stage { --mb-scale: .72; } } /* Sombra proyectada sobre el "piso": viaja con la tablet y respira. */ .mb-shadow { position: absolute; left: 50%; top: 50%; width: 480px; height: 64px; transform: translate(calc(-50% + var(--mb-x)), calc(215px * var(--mb-scale) + var(--mb-y))) scale(var(--mb-s)); background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 45%, transparent 72%); filter: blur(14px); transition: transform 1.4s var(--easeSmooth); animation: mbShadow 7s var(--easeSmooth) infinite; } @keyframes mbShadow { 0%,100% { opacity: .95; } 50% { opacity: .55; } } /* Flotado tipo Spline: solo transform → capa compuesta, no repinta el 3D. El modo captura del padre (?kalosshot=1) anula toda animación. Al hacer hover se PAUSA: si la tablet se mueve durante un click, el botón de jugar se escapa de abajo del cursor. */ .mb-float { animation: mbFloat 7s var(--easeSmooth) infinite; } .mb-float:hover { animation-play-state: paused; } @keyframes mbFloat { 0%,100% { transform: translateY(-10px); } 50% { transform: translateY(8px); } } /* --- La tablet ------------------------------------------------------ Consume las vars de pose del stage: viaja, rota y escala por estado. No se puede arrastrar (tablet quieta = botón de jugar siempre estable); al hover se pausa el flotado y aparece el botón de jugar. */ .tablet { position: relative; width: 520px; height: 384px; transform-style: preserve-3d; transform: translate3d(var(--mb-x), var(--mb-y), 0) rotateX(var(--mb-rx)) rotateY(var(--mb-ry)) rotate(var(--mb-rz)) scale(calc(var(--mb-scale) * var(--mb-s))); transition: transform 1.4s var(--easeSmooth); pointer-events: auto; } /* Botón de jugar (aparece al hover; oculto durante el juego) */ .tb-play { position: absolute; left: 50%; bottom: 30px; z-index: 8; transform: translateX(-50%); padding: .75rem 1.4rem; border-radius: 100px; border: 1px solid var(--acid); background: rgba(10,10,12,.88); color: var(--acid); font-family: var(--font-mono); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; opacity: 0; translate: 0 6px; transition: opacity .35s var(--ease), translate .35s var(--ease); } .tablet:hover .tb-play { opacity: 1; translate: 0 0; } .cine-stage[data-mb-state="game"] .tb-play { display: none; } /* Pantalla del juego */ .mb-scr--game { background: #0d0d10; } .mb-game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .cine-stage[data-mb-state="game"] .mb-scr--game { opacity: 1; transform: none; } /* Carga del juego: feedback INMEDIATO al click (mientras la tablet viaja al centro). scroll.js añade .is-ready cuando el runner arranca. */ .mb-game-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; background: #0d0d10; transition: opacity .35s var(--ease), visibility .35s; } .mb-scr--game.is-ready .mb-game-loading { opacity: 0; visibility: hidden; } .gl-k { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; background: #f4f4f0; color: #101013; font-family: var(--font-display); font-weight: 800; font-size: 26px; animation: glPulse 1s var(--easeSmooth) infinite; } .gl-txt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a8a92; } .gl-bar { width: 180px; height: 3px; border-radius: 2px; background: #232327; overflow: hidden; position: relative; } .gl-bar i { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: var(--acid); animation: glBar 1.1s var(--easeSmooth) infinite; } @keyframes glPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } } @keyframes glBar { 0% { left: -40%; } 100% { left: 100%; } } /* Overlay que oscurece la página durante el juego: la tablet (stage z4) queda como protagonista sobre el velo (z3, sobre el texto z2). */ .cine-dim { position: fixed; inset: 0; z-index: 3; background: rgba(4, 4, 6, .78); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s var(--ease), visibility .6s; } html.cine-game .cine-dim { opacity: 1; visibility: visible; } /* OJO: NO usar overflow:hidden en para bloquear el scroll del juego: rompe la propagación del scroll del body y el sticky del stage deja de funcionar (la tablet desaparece). El bloqueo es por eventos: snap.js preventDefault de la rueda con .cine-game y game.js bloquea las teclas. */ /* Cuerpo: canto de aluminio pulido + bisel negro uniforme */ .tb-body { position: absolute; inset: 0; border-radius: 30px; background: #0a0a0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), inset 0 0 0 3px #3d3d43, inset 0 0 0 4px rgba(0,0,0,.92), 0 40px 80px -30px rgba(0,0,0,.85); backface-visibility: hidden; } .tb-screen { position: absolute; inset: 15px; border-radius: 17px; background: #050507; overflow: hidden; } /* Reflejo de vidrio: dos vetas diagonales */ .tb-screen::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 17px; background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 22%, transparent 38%), linear-gradient(115deg, transparent 55%, rgba(255,255,255,.05) 62%, transparent 72%); } /* Cámara frontal (borde superior, apaisada) */ .tb-cam { position: absolute; z-index: 5; top: 5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: #0d1420; box-shadow: inset 0 0 2px 1px #1d3050, 0 0 3px rgba(90,140,255,.35); } /* Trasera de aluminio (visible si el giro la muestra) */ .tb-back { position: absolute; inset: 0; border-radius: 30px; transform: translateZ(-5px) rotateY(180deg); background: radial-gradient(120% 90% at 30% 10%, #3b3b41 0%, #232327 55%, #131316 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); display: grid; place-items: center; backface-visibility: hidden; } .tb-back::before { content: 'K'; font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; color: rgba(255,255,255,.18); text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.06); } /* Botones físicos en el canto superior */ .tb-btn { position: absolute; top: -2px; height: 3px; border-radius: 2px; background: linear-gradient(180deg, #4a4a52, #2b2b30); } .tb-btn--power { right: 64px; width: 44px; } .tb-btn--vol { right: 18px; width: 30px; } /* --- Contenidos de la pantalla (uno por estado, crossfade) ---------- */ .mb-scr { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: scale(.985); transition: opacity .7s var(--ease), transform .7s var(--ease); font-family: var(--font-mono); } [data-mb-state="error"] .mb-scr--error, [data-mb-state="code"] .mb-scr--code, [data-mb-state="web"] .mb-scr--web, [data-mb-state="google"] .mb-scr--google { opacity: 1; transform: none; } /* Barra de navegador compartida (semáforo macOS + píldora de URL) */ .mb-chrome { position: relative; z-index: 2; height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #26262b; } .mb-chrome .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .mb-chrome .dot.r { background: #ff5f57; } .mb-chrome .dot.y { background: #febc2e; } .mb-chrome .dot.g { background: #28c840; } .mb-url { flex: 1; margin-left: 6px; height: 18px; border-radius: 12px; background: #1a1a1e; color: #9aa0a6; font-size: 10.5px; letter-spacing: .02em; display: flex; align-items: center; padding: 0 10px; } .mb-tab { margin-left: 6px; align-self: flex-end; background: #0d0d10; color: #c8c8cf; font-size: 10.5px; padding: 5px 14px 6px; border-radius: 7px 7px 0 0; } /* (01) Google sin resultados para "tu producto o servicio" */ .mb-scr--error { background: #fff; color: #202124; } .mb-g-nores { margin-top: 16px; font-family: var(--font-body); } .mb-g-nores b { display: block; font-size: 15.5px; font-weight: 600; color: #202124; } .mb-g-nores p { margin-top: 7px; font-size: 11.5px; line-height: 1.6; color: #5f6368; } .mb-g-nores p strong { color: #202124; font-weight: 600; } /* (02) Código */ .mb-scr--code { background: #0d0d10; } .mb-code { padding: 13px 18px; } .mb-code .cl { display: block; font-size: 12.5px; line-height: 2; white-space: nowrap; } .mb-code .k { color: #ff7b9c; } /* keyword */ .mb-code .s { color: #8ee6a8; } /* string */ .mb-code .f { color: #7ab8ff; } /* función */ .mb-code .c { color: #55555f; } /* comentario */ .mb-code .m { color: #e7e7e2; } /* texto */ .mb-caret { display: inline-block; width: 8px; height: 14px; margin-left: 3px; vertical-align: -2px; background: var(--acid); animation: mbCaret 1.1s steps(2, jump-none) infinite; } @keyframes mbCaret { 50% { opacity: 0; } } /* (03) La web terminada */ .mb-scr--web { background: #f4f4f0; color: #101012; } .mb-web-hero { position: relative; height: 56%; background: radial-gradient(140% 120% at 20% 0%, #26262b 0%, #101013 70%); display: flex; flex-direction: column; justify-content: center; padding: 0 26px; gap: 6px; } .mb-web-hero .t1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: #f4f4f0; font-size: 27px; line-height: .95; } .mb-web-hero .t1 em { font-style: normal; color: var(--acid); } .mb-web-hero .t2 { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #8a8a92; } .mb-web-hero .cta { margin-top: 8px; align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #101012; background: var(--acid); padding: 5px 12px; border-radius: 3px; } .mb-web-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px; } .mb-web-grid i { position: relative; height: 48px; border-radius: 5px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.07); } .mb-web-grid i::before { content: ''; position: absolute; left: 8px; top: 8px; width: 14px; height: 14px; border-radius: 3px; background: var(--acid); opacity: .85; } .mb-web-grid i::after { content: ''; position: absolute; left: 8px; right: 30%; bottom: 8px; height: 4px; border-radius: 2px; background: #d9d9d2; } /* (04) Google encontrando kalosmk.com */ .mb-scr--google { background: #fff; color: #202124; } .mb-g { padding: 14px 24px 0; font-family: var(--font-body); } .mb-g-logo { font-weight: 700; font-size: 21px; letter-spacing: -.02em; margin-bottom: 9px; } .mb-g-logo b:nth-child(1){color:#4285f4}.mb-g-logo b:nth-child(2){color:#ea4335}.mb-g-logo b:nth-child(3){color:#fbbc05}.mb-g-logo b:nth-child(4){color:#4285f4}.mb-g-logo b:nth-child(5){color:#34a853}.mb-g-logo b:nth-child(6){color:#ea4335} .mb-g-search { display: flex; align-items: center; gap: 8px; border: 1px solid #dfe1e5; border-radius: 20px; padding: 6px 12px; font-size: 11px; color: #3c4043; box-shadow: 0 1px 4px rgba(0,0,0,.08); } .mb-g-search::before { content: '🔍'; font-size: 10px; } .mb-g-result { margin-top: 13px; } .mb-g-result .u { color: #202124; font-size: 10.5px; } .mb-g-result .u b { color: #0f9d58; } .mb-g-result .t { color: #1a0dab; font-size: 14.5px; font-weight: 600; margin: 2px 0 3px; } .mb-g-result .d { color: #4d5156; font-size: 10.5px; line-height: 1.5; } .mb-g-result .chk { color: #0f9d58; font-weight: 700; } /* Resultado "fantasma" debajo (la competencia, desenfocada) */ .mb-g-ghost { margin-top: 14px; opacity: .35; } .mb-g-ghost i { display: block; height: 8px; border-radius: 4px; background: #dadce0; margin-bottom: 7px; } .mb-g-ghost i:last-child { width: 68%; } /* --------------------------------------------------------------------- Layout de escritorio: texto a la izquierda, laptop flotando a la derecha ------------------------------------------------------------------- */ @media (min-width: 901px) { /* El texto alterna de lado según dónde esté la tablet en su viaje: 01 error → tablet derecha (texto izq) · 02 code → tablet IZQUIERDA (texto der) · 03 web → derecha (texto izq) · 04 google → centro-der. */ .cine-panel .cine-inner { padding-right: 42vw; } .cine-problem .cine-inner { padding-right: 0; padding-left: 46vw; } .cine-cta .cine-inner { padding-right: 48vw; } /* --- Compacto para el snap (como body.kalos-snap en el padre) --- Cada panel debe caber COMPLETO en 100svh; si excede, snap.js lo trata como "sección alta" y mete scroll nativo antes de saltar. */ .cine-panel { padding: clamp(4.5rem, 10vh, 7rem) 0 clamp(2.5rem, 6vh, 4rem); } .cine-idx { margin-bottom: 1rem; font-size: .74rem; } .cine-hook-title { font-size: clamp(1.9rem, 4.1vw, 3.4rem); line-height: .96; } .cine-h { font-size: clamp(1.5rem, 3vw, 2.5rem); } .cine-lead { font-size: clamp(.95rem, 1.15vw, 1.05rem); margin-top: 1rem; max-width: 46ch; } .cine-actions { margin-top: 1.6rem; } .cine-note { margin-top: 1.4rem; font-size: .82rem; } .cine-mirror { margin-top: 1.4rem; } .cine-mirror li { font-size: clamp(.95rem, 1.2vw, 1.1rem); padding: .55rem 0; } .cine-promise-row { margin-top: 1.6rem; } .cine-p-item b { font-size: clamp(1.05rem, 1.6vw, 1.3rem); } .cine-p-item .p-desc { font-size: .88rem; } } /* El header simplificado + overlay (hamburguesa "Menú", links con "_", bloque de contacto con redes) se movió a global.css para que sea IDÉNTICO en TODAS las páginas (antes vivía acá y solo aplicaba en la home). */ /* --------------------------------------------------------------------- CTA final scrollytelling (cierre): la tablet reaparece de fondo con el buscador de Google abierto; al entrar en viewport (is-visible del padre) sube desde abajo mientras el titular aparece encima con halo. ------------------------------------------------------------------- */ .cine-final { position: relative; margin-top: clamp(3rem, 8vh, 5rem); padding: clamp(3rem, 9vh, 6rem) 0 clamp(3rem, 8vh, 6rem); border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; perspective: 1400px; } /* Halo de énfasis detrás del titular (queda debajo de la tablet, al centro) */ .cine-final::before { content: ''; position: absolute; left: 50%; bottom: 16%; z-index: 0; width: 62vw; height: 40vw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acid) 12%, transparent) 0%, transparent 62%); filter: blur(40px); pointer-events: none; } /* La tablet AHORA va ARRIBA, de frente, con el buscador de Google visible. La frase acompaña debajo. Entra deslizándose desde abajo al ver la sección. */ .cf-tablet { position: relative; z-index: 1; width: min(560px, 92vw); aspect-ratio: 16 / 10; margin-bottom: clamp(1.8rem, 4.5vh, 3rem); border-radius: 22px; background: #0a0a0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 3px #3d3d43, 0 40px 90px -30px rgba(0,0,0,.8); padding: 10px; opacity: 0; transform: translateY(46px) rotateX(12deg); transform-origin: center bottom; transition: opacity 1s var(--easeSmooth), transform 1.2s var(--easeSmooth); pointer-events: none; } .cine-final.is-visible .cf-tablet { opacity: 1; transform: translateY(0) rotateX(4deg); } .cf-screen { height: 100%; border-radius: 14px; overflow: hidden; background: #fff; color: #202124; } /* Titular y CTA debajo de la tablet */ .cine-final h2, .cine-final .sub, .cine-final .row { position: relative; z-index: 1; } .cine-final h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: .98; letter-spacing: -0.02em; max-width: 16ch; } .cine-final .sub { margin-top: 1.2rem; max-width: 52ch; } .cine-final .row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.2rem; } /* --------------------------------------------------------------------- Portfolio: slider horizontal con snap lateral y cards individuales ------------------------------------------------------------------- */ .pf-track { display: flex; gap: 1.2rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: .4rem .2rem 1.1rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .pf-card { flex: 0 0 min(380px, 78vw); scroll-snap-align: start; display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1rem 1.2rem; transition: transform .4s var(--ease), border-color .4s; } .pf-card:hover { transform: translateY(-6px); border-color: var(--acid); } .pf-media { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #1d1d22; display: grid; place-items: center; margin-bottom: .9rem; } .pf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pf-media .emoji { font-size: 2rem; } .pf-card h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; letter-spacing: -0.01em; margin: .5rem 0 .3rem; } .pf-card p { font-family: var(--font-body); color: var(--muted); font-size: .92rem; line-height: 1.5; margin-bottom: .7rem; } .pf-hint { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; } .pf-hint span { color: var(--acid); } /* --------------------------------------------------------------------- Carrusel infinito de logos de clientes ------------------------------------------------------------------- */ .logo-carousel { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.4rem 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .lc-inner { display: flex; align-items: center; gap: clamp(2.4rem, 5vw, 4.5rem); width: max-content; animation: lcScroll 32s linear infinite; } .lc-logo { flex: 0 0 auto; } .lc-logo img { height: 44px; width: auto; display: block; opacity: .65; filter: grayscale(1); transition: opacity .3s, filter .3s; } .lc-logo img:hover { opacity: 1; filter: none; } @keyframes lcScroll { to { transform: translateX(-50%); } } /* El fundido de los botones flotantes al llegar al footer (cine-footer-vis) vive ahora en global.css (site-wide). El posicionamiento base también. */ /* Redes sociales en el footer */ .footer-social { display: flex; gap: 1rem; flex-wrap: wrap; } /* --------------------------------------------------------------------- #resto como "hoja" que se desliza SOBRE la historia (esquinas redondas, por encima de la tablet → refuerza la máscara) + footer card flotante. ------------------------------------------------------------------- */ .cine-resto { position: relative; z-index: 5; background: var(--bg); border-radius: 32px 32px 0 0; margin-top: -32px; box-shadow: 0 -30px 70px rgba(0,0,0,.5); overflow: clip; } /* El footer card + redes + CTA Mi panel viven en assets/css/global.css (cargan en TODO el sitio, no solo en la home). */ /* --------------------------------------------------------------------- Responsive ------------------------------------------------------------------- */ @media (max-width: 900px) { .cine-inner { width: 86%; } .cine-promise-row { grid-template-columns: 1fr; } .wa-float-label { display: none; } .wa-float { padding: .85rem; } /* --- Tablet en mobile: estructura vertical tipo historia de Instagram --- La tablet SE VE (más chica), de frente, centrada arriba y de tamaño CONSTANTE (ya no viaja ni cambia de escala por panel: solo cambia su pantalla). El texto de cada panel va debajo. --- */ .cine-stage { display: block; } /* La tablet (.tablet, 520px) se centra y escala a .62 en mobile, pero su envoltorio .mb-float conserva 520px de caja y desbordaba el viewport (scroll horizontal). Clipamos ese ancho fantasma en el PROPIO stage: overflow en el elemento sticky recorta a sus hijos SIN afectar su propio position:sticky (que depende del contenedor de scroll ancestro, no de sí mismo). En mobile la tablet va quieta y centrada, así que no se corta. */ .cine-stage { overflow-x: clip; } .cine-stage, .cine-stage[data-mb-state="code"], .cine-stage[data-mb-state="web"], .cine-stage[data-mb-state="google"], .cine-stage[data-mb-state="game"] { --mb-x: 0vw; --mb-y: -25vh; --mb-rx: 0deg; --mb-ry: 0deg; --mb-rz: 0deg; --mb-s: 1; --mb-scale: .62; } .mb-shadow { display: none; } /* de frente y plana: sin sombra flotante */ .mb-float { animation: none; } /* quieta arriba (no flota) */ .tb-play { display: none; } /* el juego es solo desktop (hover) */ /* Centrado robusto: el grid del pin usa columna `auto` (= ancho de la tablet, 520px). En viewports donde no coincide con el ancho, esa columna se alineaba al inicio (izquierda). Centramos el track para que la tablet quede SIEMPRE al medio. */ .cine-pin { justify-content: center; } /* Máscara superior: al scrollear, el texto se desvanece por detrás de la tablet en lugar de amontonarse. El stage (z4) va sobre el texto, así que este fade (dentro del pin) tapa la franja de la tablet con el color de fondo. Se escapa del grid del pin por ser position:absolute. */ .cine-pin::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 48vh; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 68%, transparent 100%); } /* Texto debajo de la tablet: arranca a ~46vh (deja el top para el device). */ .cine-panel { align-items: flex-start; background: var(--bg); } .cine-inner { padding-top: 46vh; } /* Compactar la Solución para que entre en el espacio de abajo. */ .cine-panel { padding: clamp(3rem, 8vh, 5rem) 0 clamp(2.5rem, 7vh, 4rem); } .cine-promise-row { margin-top: 1.2rem; max-width: none; } .cine-p-item { padding: .7rem 0 .8rem; gap: .9rem; } .cine-p-item .p-desc { margin-top: .3rem; font-size: .88rem; line-height: 1.4; } .cine-steps { margin-top: 1rem; gap: .4rem .7rem; } .cine-idx { margin-bottom: .9rem; } } /* Viewports bajos (mobile apaisado): tablet más chica y menos arriba para que no domine la pantalla. */ @media (max-width: 900px) and (max-height: 620px) { .cine-stage, .cine-stage[data-mb-state] { --mb-scale: .42; --mb-y: -22vh; } .cine-pin::before { height: 40vh; } .cine-inner { padding-top: 38vh; } } @media (max-width: 560px) { .cine-inner { width: 90%; padding-top: 44vh; } } /* Accesibilidad: sin animación de entrada, bob, flotado ni caret si el usuario lo pide (incluye el toggle "detener animaciones" del widget del padre → clase a11y-stop en ). */ @media (prefers-reduced-motion: reduce) { body.kalos-cine { scroll-behavior: auto; } [data-cine-in] { opacity: 1 !important; transform: none !important; transition: none; } .cine-scroll-cue .cue-arrow, .cine-scroll-cue .cue-arrow::after { animation: none; } .mb-float, .mb-shadow, .mb-caret { animation: none; } } html.a11y-stop [data-cine-in] { opacity: 1 !important; transform: none !important; transition: none; } html.a11y-stop .cine-scroll-cue .cue-arrow, html.a11y-stop .cine-scroll-cue .cue-arrow::after { animation: none; } html.a11y-stop .mb-float, html.a11y-stop .mb-shadow, html.a11y-stop .mb-caret { animation: none; }