/* Marca: lila #3C1581, papel #F9F8FA, títulos Inter medio, texto Montserrat */
@font-face { font-family: 'Montserrat'; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-display: swap; src: url('/fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-display: swap; src: url('/fonts/montserrat-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'Garamond Cond'; font-style: italic; font-weight: 300; font-display: swap; src: url('/fonts/ITCGaramondStd-LtCondIta.woff2') format('woff2'), url('/fonts/ITCGaramondStd-LtCondIta.woff') format('woff'); }

body { background: #F9F8FA; }
::selection { background: #3C1581; color: #fff; }
h1.sube { color: #3C1581; }
.cta::after { display: none !important; }
.raya { background: #3C1581; }

/* ——— dinamismo del test ——— */
@keyframes mk-up { from { opacity: 0; } to { opacity: 1; } }
.mk-in { animation: mk-up .25s ease backwards; animation-delay: var(--mk-d, 0ms); }
@keyframes mk-pop { 0% { transform: scale(1); } 35% { transform: scale(.94); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
.mk-pop { animation: none !important; }
button, a, label, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* confeti al tocar */
.mk-p { position: fixed; z-index: 200; pointer-events: none; border-radius: 1px; transform: translate(-50%, -50%); animation: mk-boom .75s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes mk-boom { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 28px)) rotate(var(--r)); opacity: 0; } }

/* cortina de hito */
.mk-cortina { position: fixed; inset: 0; z-index: 150; pointer-events: none; background: #F9F8FA; display: grid; place-items: center; color: #3C1581;
  animation: mk-cortina 1.3s cubic-bezier(.77,0,.18,1) forwards; }
.mk-c-in { text-align: center; padding: 0 28px; animation: mk-c-in 1.3s ease forwards; }
.mk-c-in img { width: min(92vw, 400px); margin: -10% auto -6%; display: block; animation: mk-float 1.3s ease-in-out; }
.mk-art-2 { animation: mk-swipe 1.3s ease-in-out !important; }
.mk-art-4 { animation: mk-pulse 1.3s ease-in-out !important; }
.mk-art-6 { animation: mk-bounce 1.3s cubic-bezier(.34,1.56,.64,1) !important; }
@keyframes mk-swipe { 0%, 25% { transform: translateX(-26px) rotate(-5deg); } 55% { transform: translateX(26px) rotate(5deg); } 100% { transform: none; } }
@keyframes mk-pulse { 0%, 30% { transform: scale(.9); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes mk-bounce { 0%, 22% { transform: translateY(40px) scale(.8); } 45% { transform: translateY(-18px) scale(1.06); } 62% { transform: translateY(0) scale(.98); } 100% { transform: none; } }
.mk-c-in p { margin: 0; font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-style: normal; font-weight: 500; font-size: clamp(26px, 6.4vw, 40px); line-height: 1.15; letter-spacing: -.025em; }
@keyframes mk-cortina { 0% { clip-path: inset(100% 0 0 0); } 28% { clip-path: inset(0); } 72% { clip-path: inset(0); } 100% { clip-path: inset(0 0 100% 0); } }
@keyframes mk-c-in { 0%, 18% { opacity: 0; transform: translateY(18px) scale(.96); } 36%, 66% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; } }
@keyframes mk-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

@media (prefers-reduced-motion: reduce) { .mk-in, .mk-pop, .mk-cortina, .mk-p { animation: none !important; } .mk-cortina, .mk-p { display: none; } }

/* ——— fondo de marca vivo (rejilla punteada + dos diagonales paralelas) ——— */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(60,21,129,.12) 1.3px, transparent 1.6px); background-size: 26px 26px;
  animation: mk-dots 50s linear infinite; }
body::after { content: ""; position: fixed; inset: -20% -20%; z-index: 0; pointer-events: none;
  background: linear-gradient(-12deg, transparent 36%, rgba(60,21,129,.10) 36%, rgba(60,21,129,.10) calc(36% + 2px), transparent calc(36% + 2px), transparent 64%, rgba(60,21,129,.10) 64%, rgba(60,21,129,.10) calc(64% + 2px), transparent calc(64% + 2px));
  animation: mk-diag 18s ease-in-out infinite alternate; }
@keyframes mk-dots { to { background-position: 260px 130px; } }
@keyframes mk-diag { from { transform: translate(-3%, 2%); } to { transform: translate(3%, -2%); } }
#root { position: relative; z-index: 1; }
.grano-claro { background: transparent !important; }

/* transición entre pantallas */
@keyframes mk-slide { from { opacity: 0; } to { opacity: 1; } }
.mk-wipe > div:not(.grano-oscuro) { animation: mk-slide .25s ease; }

/* marquesina de dibujos */
.mk-marquee { overflow: hidden; margin: 18px -22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.mk-track { display: flex; width: max-content; animation: mk-scroll 34s linear infinite; }
.mk-track img { width: 112px; height: 112px; object-fit: contain; margin-right: 22px; flex: 0 0 auto; }
.mk-track img:nth-child(odd) { transform: translateY(6px) rotate(-3deg); }
.mk-track img:nth-child(even) { transform: translateY(-6px) rotate(3deg); }
@keyframes mk-scroll { to { transform: translateX(-50%); } }

/* botón principal: latido suave cuando está activo */
button[style*="60, 21, 129"]:not(:disabled) { animation: mk-beat 2.6s ease-in-out infinite; }
@keyframes mk-beat { 0%, 100% { box-shadow: 0 0 0 0 rgba(60,21,129,.35); } 55% { box-shadow: 0 0 0 12px rgba(60,21,129,0); } }

/* opciones: se levantan al pasar o tocar */
.op:active { background: #ECE7F6; }
@media (prefers-reduced-motion: reduce) { body::before, body::after, .mk-track, button[style*="60, 21, 129"] { animation: none !important; } }

/* cargador del plan: reloj de arena que da la vuelta */
#mk-load { position: fixed; right: 18px; top: 14px; width: 84px; height: 84px; z-index: 40; pointer-events: none; animation: mk-flip 3.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes mk-flip { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }

/* trofeo del resultado */
#mk-trofeo, .mk-trofeo { position: absolute; top: 8px; right: 12px; width: 84px; height: 84px; border-radius: 22px; background: #F9F8FA; box-shadow: 0 6px 18px rgba(60,21,129,.28); object-fit: cover; z-index: 40; pointer-events: none; animation: mk-bounce2 1s cubic-bezier(.34,1.56,.64,1) .5s backwards; }
@keyframes mk-bounce2 { from { opacity: 0; transform: translateY(30px) scale(.5) rotate(-12deg); } to { opacity: 1; transform: none; } }

/* sin barra horizontal por el fondo animado */
html, body { overflow-x: hidden; }

/* ——— test dinámico ——— */
.mk-ilu { position: absolute; top: -4px; right: 10px; width: 70px; height: 70px; object-fit: contain; pointer-events: none; z-index: -1;
  animation: mk-flota 5.5s ease-in-out infinite; }
@keyframes mk-flota { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

.mk-viaje { position: relative; height: 30px; max-width: 520px; margin: 0 auto; padding: 0 22px; box-sizing: content-box; width: calc(100% - 44px); }
.mk-viaje::before { content: ""; position: absolute; left: 22px; right: 22px; top: 14px; border-top: 2px dotted rgba(60,21,129,.18); }
.mk-viaje__rastro { position: absolute; left: 22px; top: 13px; height: 4px; transition: width .7s cubic-bezier(.32,.72,0,1);
  background-image: radial-gradient(circle, #D4A94F 1.7px, transparent 2px); background-size: 9px 4px; background-repeat: repeat-x; max-width: calc(100% - 44px); }
.mk-viaje__avion { position: absolute; top: 2px; margin-left: 12px; transition: left .7s cubic-bezier(.32,.72,0,1); transform: translateX(-50%) rotate(8deg);
  filter: drop-shadow(0 3px 4px rgba(60,21,129,.25)); animation: mk-vuelo 3s ease-in-out infinite; }
@keyframes mk-vuelo { 0%, 100% { margin-top: 0; } 50% { margin-top: -3px; } }

/* títulos: revelado de izquierda a derecha, como un rótulo de película */
#root h2 { animation: mk-rotulo .75s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes mk-rotulo { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* dibujos ambientales al fondo */
#mk-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#mk-ambient img { position: absolute; object-fit: contain; opacity: .13; animation: mk-deriva var(--d, 26s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes mk-deriva { 0%, 100% { transform: translate(0, 0) rotate(var(--r, -6deg)); } 50% { transform: translate(var(--dx, 22px), var(--dy, -26px)) rotate(calc(var(--r, -6deg) * -1)); } }

/* en pantallas táctiles no se mueven las opciones al pulsar (hacía fallar el toque) */
@media (hover: none) { .op:hover, .op:active, .op:focus-visible { transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .mk-ilu, .mk-viaje__avion, #mk-ambient img, #root h2 { animation: none !important; } }

/* pantalla de carga: vuelo aéreo de fondo */
#mk-load-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .2; pointer-events: none; }

/* ——— el test dentro del mundo ——— */
#mk-ambient { display: none !important; }
#mk-mundo { position: fixed; z-index: 0; left: 0; top: 0; right: 0; height: 50vh; overflow: hidden; background: #F9F8FA; pointer-events: none; }
#mk-mundo img, #mk-mundo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
#mk-mundo video { opacity: 0; transition: opacity .5s ease; }
#mk-mundo.listo video { opacity: 1; }
#root { margin-top: 42vh; }
#root > div.grano-claro { background: rgba(249,248,250,.95) !important; border-radius: 30px 30px 0 0; min-height: 72vh !important; box-shadow: 0 -14px 40px rgba(60,21,129,.14); }
body.mk-sinmundo #mk-mundo { display: none; }
body.mk-sinmundo #root { margin-top: 0; }
@media (min-width: 861px) {
  #mk-mundo { right: auto; width: 46vw; height: 100vh; }
  #root { margin-top: 0; margin-left: 46vw; }
  #root > div.grano-claro { border-radius: 0; min-height: 100vh !important; box-shadow: -18px 0 50px rgba(60,21,129,.12); }
  body.mk-sinmundo #root { margin-left: 0; }
}

/* cortinas animadas: el vídeo hace el movimiento, así que se quitan los del CSS */
.mk-c-in video, .mk-c-in canvas { width: min(92vw, 400px); margin: -10% auto -6%; display: block; animation: none !important; }

/* portada: el mundo se ve entero y la hoja empieza mas abajo */
@media (max-width: 860px) {
  body.mk-portada #mk-mundo { height: 62vh; }
  body.mk-portada #root { margin-top: 56vh; }
  body.mk-portada #root > div.grano-claro { min-height: 50vh !important; }
}