/* Ambiente Minecraft del diseño nuevo: paisaje, HUD con hotbar, tooltips, cinta de novedades y pie. (Generado con gen-mc.py) */
html[data-ui="2"] {
  --mc-hill-3: #0b1f2e; --mc-hill-2: #0d2a1d; --mc-hill-1: #123a22; --mc-grass: #2d8a3e; --mc-dirt: #3b2a1c; --mc-leaf: #1d6b30; --mc-wood: #4a3320;
  --mc-cloud: rgba(255, 255, 255, .07); --mc-orb: #8bff6a;
  --mc-sunc: #eef1ff; --mc-sung: rgba(190, 205, 255, .4); --mc-star: .8;
}
html[data-ui="2"][data-theme='light'] {
  --mc-hill-3: #9fd0e8; --mc-hill-2: #8ccf72; --mc-hill-1: #6fbf4f; --mc-grass: #5da536; --mc-dirt: #8a5a36; --mc-leaf: #3f9a3a; --mc-wood: #6b4a2b;
  --mc-cloud: rgba(255, 255, 255, .85); --mc-sunc: #ffe56b; --mc-sung: rgba(255, 215, 70, .65); --mc-star: 0;
}
@media (prefers-color-scheme: dark) { html[data-ui="2"]:not([data-theme='light']) { --mc-cloud: rgba(255, 255, 255, .07); --mc-sunc: #eef1ff; --mc-sung: rgba(190, 205, 255, .4); --mc-star: .8; } }

/* rendimiento: las secciones fuera de pantalla no se pintan hasta que hacen falta */
html[data-ui="2"] main > .block, html[data-ui="2"] main > section.wrap, html[data-ui="2"] main > .band { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* textura de píxeles muy suave */
html[data-ui="2"] body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' shape-rendering='crispEdges'%3E%3Cg fill='%23fff' fill-opacity='.025'%3E%3Crect x='6' y='12' width='6' height='6'/%3E%3Crect x='54' y='30' width='6' height='6'/%3E%3Crect x='30' y='66' width='6' height='6'/%3E%3Crect x='78' y='78' width='6' height='6'/%3E%3Crect x='18' y='42' width='6' height='6'/%3E%3C/g%3E%3C/svg%3E"); }
html[data-ui="2"] main, html[data-ui="2"] .top, html[data-ui="2"] .foot { position: relative; z-index: 1; }
html[data-ui="2"] .top { z-index: 30; }

/* cielo y paisaje de la portada */
.mc-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mc-sun { position: absolute; top: 52px; left: 47%; width: 56px; height: 56px; background: var(--mc-sunc); box-shadow: 0 0 60px 16px var(--mc-sung); }
.mc-star { position: absolute; width: 3px; height: 3px; background: #fff; opacity: var(--mc-star); animation: mc-tw 3.2s steps(3) infinite; }
@keyframes mc-tw { 50% { opacity: calc(var(--mc-star) * .25); } }
.mc-cloud { position: absolute; top: 18px; height: 22px; background: var(--mc-cloud); box-shadow: 22px -14px 0 var(--mc-cloud), 44px 0 0 var(--mc-cloud), 66px -8px 0 var(--mc-cloud); animation: mc-cloud 90s linear infinite; will-change: transform; }
@keyframes mc-cloud { from { transform: translateX(-120px); } to { transform: translateX(calc(100vw + 120px)); } }
.mc-land { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 38%); mask-image: linear-gradient(180deg, transparent, #000 38%); }
.mc-land svg { position: absolute; left: 50%; bottom: 0; width: 1600px; height: 190px; max-width: none; transform: translateX(-50%); shape-rendering: crispEdges; }
.mc-l3 { fill: var(--mc-hill-3); } .mc-l2 { fill: var(--mc-hill-2); } .mc-gr { fill: var(--mc-grass); } .mc-dt { fill: var(--mc-dirt); } .mc-lf { fill: var(--mc-leaf); } .mc-wd { fill: var(--mc-wood); }
.mc-orb { position: absolute; bottom: 30px; width: 7px; height: 7px; background: var(--mc-orb); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--mc-orb) 70%, transparent); animation: mc-orb 9s ease-in infinite; opacity: 0; will-change: transform, opacity; }
@keyframes mc-orb { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .95; } 60% { transform: translate(14px, -120px); } 100% { opacity: 0; transform: translate(-8px, -210px); } }

/* cinta con lo último */
.tick { position: relative; z-index: 1; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 88%, transparent); overflow: hidden; }
.tick-l { flex: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 20px; border-right: 1px solid var(--line); font: 400 13px/1 var(--f-px); letter-spacing: .08em; text-transform: uppercase; color: var(--forge); }
.tick-l i { width: 8px; height: 8px; background: var(--forge); animation: mc-blink 1.4s steps(2) infinite; }
@keyframes mc-blink { 50% { opacity: .25; } }
.tick-view { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tick-track { display: flex; gap: 6px; width: max-content; padding: 8px 0; animation: mc-tick 70s linear infinite; will-change: transform; }
.tick-view:hover .tick-track { animation-play-state: paused; }
@keyframes mc-tick { to { transform: translateX(-50%); } }
.tick-i { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: 12px; text-decoration: none; color: var(--ink); transition: background .15s; }
.tick-i:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.tick-i svg { width: 28px; height: 32px; flex: none; }
.tick-i span { display: grid; line-height: 1.15; } .tick-i small { color: var(--ink-3); font: 400 11px/1 var(--f-px); text-transform: uppercase; letter-spacing: .06em; } .tick-i b { font-size: 14.5px; white-space: nowrap; }

/* HUD: hotbar y barra de experiencia */
.mc-hud { position: fixed; left: 50%; bottom: 14px; z-index: 55; display: grid; justify-items: stretch; gap: 8px; transform: translateX(-50%); opacity: .88; transition: transform .3s ease, opacity .2s; }
.mc-hud:hover, .mc-hud:focus-within { opacity: 1; }
.mc-hud.is-hide { transform: translate(-50%, 170%); opacity: 0; pointer-events: none; }
.mc-xp { position: relative; height: 8px; margin: 0 8px; background: rgba(0, 0, 0, .65); border: 1px solid rgba(255, 255, 255, .16); border-radius: 3px; box-shadow: 0 0 12px rgba(125, 255, 94, .18); }
.mc-xp i { display: block; height: 100%; width: 0; border-radius: 2px; background: repeating-linear-gradient(90deg, #9dff6a 0 5px, #4fd02f 5px 6px); box-shadow: 0 0 10px rgba(125, 255, 94, .75); }
.mc-lv { position: absolute; right: calc(100% + 10px); top: -6px; min-width: 22px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .7); border: 1px solid rgba(125, 255, 94, .5); color: #9dff6a; font: 400 12px/1 var(--f-px); text-align: center; opacity: 0; transition: opacity .2s; }
.mc-lv.is-on { opacity: 1; }
.mc-bar { position: relative; display: flex; gap: 4px; padding: 7px; border-radius: 16px; background: linear-gradient(180deg, rgba(26, 28, 44, .94), rgba(9, 10, 17, .96)); border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 18px 44px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 59, 78, .28), inset 0 1px 0 rgba(255, 255, 255, .12); }
.mc-slot { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 9px; background: linear-gradient(180deg, #2c3046, #1a1c2a); border: 2px solid; border-color: #565d7e #0b0c14 #0b0c14 #565d7e; color: #fff; text-decoration: none; transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), background .16s, box-shadow .16s; }
.mc-slot:hover, .mc-slot:focus-visible { transform: translateY(-7px) scale(1.06); background: linear-gradient(180deg, color-mix(in srgb, var(--c, #fff) 32%, #2c3046), #1a1c2a); box-shadow: 0 12px 24px -8px var(--c, #fff); }
.mc-slot svg { width: 32px; height: 36px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); transition: transform .2s; }
.mc-slot:hover svg { animation: mc-bob .7s ease-in-out infinite; }
@keyframes mc-bob { 50% { transform: translateY(-4px) rotate(-5deg); } }
.mc-slot.is-on::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 7px; height: 7px; margin-left: -3px; background: var(--c, #fff); box-shadow: 0 0 10px var(--c, #fff); }
.mc-sel { position: absolute; left: 0; top: 7px; width: 52px; height: 52px; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 0 18px var(--c, #fff), inset 0 0 12px color-mix(in srgb, var(--c, #fff) 45%, transparent); pointer-events: none; opacity: 0; transition: transform .24s cubic-bezier(.3, 1.4, .5, 1), opacity .15s; z-index: 2; }
.mc-sel.is-on { opacity: 1; }
.mc-num { position: absolute; left: 5px; top: 3px; font: 400 11px/1 var(--f-px); color: rgba(255, 255, 255, .8); text-shadow: 1px 1px 0 #000; }
.mc-lbl { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 5px 10px; background: rgba(16, 0, 16, .96); border: 2px solid #28007a; color: #fff; font: 400 13px/1 var(--f-px); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; }
.mc-slot:hover .mc-lbl { opacity: 1; transform: translateX(-50%); }
.mc-hudx { display: grid; place-items: center; width: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); color: #aeb5cc; font: 400 12px/1 var(--f-px); cursor: pointer; }
.mc-hudx:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.mc-hudback { position: fixed; left: 50%; bottom: 10px; z-index: 55; display: none; transform: translateX(-50%); padding: 7px 14px; border-radius: 10px; background: rgba(10, 11, 18, .9); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font: 400 12px/1 var(--f-px); cursor: pointer; }
.mc-hudback.is-on { display: block; }
@media (max-width: 1000px), (hover: none) { .mc-hud, .mc-hudback { display: none !important; } }
@media print { .mc-hud { display: none; } }

/* mundo 2D de la portada */
.mc-game { position: absolute; left: 0; bottom: 0; width: 100%; height: 360px; z-index: 2; display: block; image-rendering: pixelated; touch-action: pan-y; }
.mc-host { position: relative; width: 100%; height: 360px; margin-top: 8px; overflow: hidden; }

/* tooltip de objeto */
.mc-tip { position: fixed; z-index: 70; max-width: 300px; padding: 8px 10px; background: rgba(16, 0, 16, .95); border: 2px solid #1b0540; box-shadow: inset 0 0 0 2px #2d0a6b; color: #fff; font: 400 14px/1.35 var(--f-px); pointer-events: none; opacity: 0; transform: translate(16px, 16px); transition: opacity .1s; }
.mc-tip.is-on { opacity: 1; }
.mc-tip b { display: block; font-weight: 400; font-size: 16px; }
.mc-tip .t-r-0 { color: #fff; } .mc-tip .t-r-1 { color: #ffff55; } .mc-tip .t-r-2 { color: #55ffff; } .mc-tip .t-r-3 { color: #ff55ff; }
.mc-tip p { margin: 4px 0 0; color: #aaaaaa; } .mc-tip .t-b { color: #5555ff; } .mc-tip .t-g { color: #55ff55; } .mc-tip .t-y { color: #ffaa00; }

/* pie: hierba, tierra y piedra con minerales, panel de enlaces y nombre gigante */
html[data-ui="2"] .foot { margin-top: 90px; }
html[data-ui="2"] .foot::before { content: ''; display: block; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2228%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%220%22 y=%2212%22 width=%224%22 height=%228%22 fill=%22%236fc84a%22/%3E%3Crect x=%224%22 y=%228%22 width=%224%22 height=%2212%22 fill=%22%237ad552%22/%3E%3Crect x=%2216%22 y=%224%22 width=%224%22 height=%2216%22 fill=%22%236fc84a%22/%3E%3Crect x=%2220%22 y=%2212%22 width=%224%22 height=%228%22 fill=%22%237ad552%22/%3E%3Crect x=%2228%22 y=%224%22 width=%224%22 height=%2216%22 fill=%22%236fc84a%22/%3E%3Crect x=%2240%22 y=%228%22 width=%224%22 height=%2212%22 fill=%22%235fb53b%22/%3E%3Crect x=%2248%22 y=%2212%22 width=%224%22 height=%228%22 fill=%22%236fc84a%22/%3E%3Crect x=%2252%22 y=%224%22 width=%224%22 height=%2216%22 fill=%22%235fb53b%22/%3E%3Crect x=%2260%22 y=%224%22 width=%224%22 height=%2216%22 fill=%22%236fc84a%22/%3E%3Crect x=%220%22 y=%2216%22 width=%2264%22 height=%228%22 fill=%22%234ea02f%22/%3E%3Crect x=%220%22 y=%2224%22 width=%2264%22 height=%224%22 fill=%22%235a3d24%22/%3E%3Crect x=%2224%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%236b4a2b%22/%3E%3Crect x=%2240%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%236b4a2b%22/%3E%3Crect x=%2248%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%236b4a2b%22/%3E%3C/svg%3E") repeat-x left bottom / 64px 28px; filter: drop-shadow(0 -6px 16px rgba(95, 181, 59, .28)); }
html[data-ui="2"] .foot-dirt { position: relative; isolation: isolate; overflow: hidden; padding: 0 0 100px; border-top: 0; background: linear-gradient(180deg, #3b2b1d 0, #2a2018 110px, #17161d 300px, #0b0b11 100%); }
html[data-ui="2"] .foot-dirt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 130px; z-index: -2; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%220%22 y=%220%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%228%22 y=%220%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2216%22 y=%220%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2224%22 y=%220%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2232%22 y=%220%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2240%22 y=%220%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2248%22 y=%220%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2256%22 y=%220%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%220%22 y=%228%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%228%22 y=%228%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%2216%22 y=%228%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2224%22 y=%228%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2232%22 y=%228%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2240%22 y=%228%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2248%22 y=%228%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2256%22 y=%228%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%220%22 y=%2216%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%228%22 y=%2216%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2216%22 y=%2216%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2224%22 y=%2216%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2232%22 y=%2216%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2240%22 y=%2216%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2248%22 y=%2216%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2256%22 y=%2216%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%220%22 y=%2224%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%228%22 y=%2224%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2216%22 y=%2224%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2224%22 y=%2224%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2232%22 y=%2224%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%2240%22 y=%2224%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2248%22 y=%2224%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2256%22 y=%2224%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%220%22 y=%2232%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%228%22 y=%2232%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%2216%22 y=%2232%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2224%22 y=%2232%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2232%22 y=%2232%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%2240%22 y=%2232%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%2248%22 y=%2232%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2256%22 y=%2232%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%220%22 y=%2240%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%228%22 y=%2240%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2216%22 y=%2240%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2224%22 y=%2240%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2232%22 y=%2240%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2240%22 y=%2240%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%2248%22 y=%2240%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2256%22 y=%2240%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%220%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%228%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2216%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2224%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2232%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2240%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2248%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%2256%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%220%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%232e2116%22/%3E%3Crect x=%228%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2216%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%2333251a%22/%3E%3Crect x=%2224%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%2232%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%2240%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%233a2a1c%22/%3E%3Crect x=%2248%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%2256%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%2341301f%22/%3E%3Crect x=%220%22 y=%2252%22 width=%224%22 height=%224%22 fill=%22%236b4a2b%22 fill-opacity=%22.55%22/%3E%3Crect x=%2212%22 y=%2216%22 width=%224%22 height=%224%22 fill=%22%236b4a2b%22 fill-opacity=%22.55%22/%3E%3Crect x=%2228%22 y=%2212%22 width=%224%22 height=%224%22 fill=%22%236b4a2b%22 fill-opacity=%22.55%22/%3E%3Crect x=%220%22 y=%224%22 width=%224%22 height=%224%22 fill=%22%236b4a2b%22 fill-opacity=%22.55%22/%3E%3Crect x=%2256%22 y=%2260%22 width=%224%22 height=%224%22 fill=%22%236b4a2b%22 fill-opacity=%22.55%22/%3E%3Crect x=%2220%22 y=%2224%22 width=%224%22 height=%224%22 fill=%22%236b4a2b%22 fill-opacity=%22.55%22/%3E%3C/svg%3E") repeat 0 0 / 64px 64px; opacity: .7; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
html[data-ui="2"] .foot-dirt::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 190px; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2212%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%220%22 y=%220%22 width=%226%22 height=%226%22 fill=%22%230b0b10%22/%3E%3Crect x=%226%22 y=%220%22 width=%226%22 height=%226%22 fill=%22%230b0b10%22/%3E%3Crect x=%2212%22 y=%220%22 width=%226%22 height=%226%22 fill=%22%230b0b10%22/%3E%3Crect x=%2218%22 y=%220%22 width=%226%22 height=%226%22 fill=%22%231d1d26%22/%3E%3Crect x=%2224%22 y=%220%22 width=%226%22 height=%226%22 fill=%22%2315151c%22/%3E%3Crect x=%2230%22 y=%220%22 width=%226%22 height=%226%22 fill=%22%231d1d26%22/%3E%3Crect x=%2236%22 y=%220%22 width=%226%22 height=%226%22 fill=%22%231d1d26%22/%3E%3Crect x=%2242%22 y=%220%22 width=%226%22 height=%226%22 fill=%22%2315151c%22/%3E%3Crect x=%220%22 y=%226%22 width=%226%22 height=%226%22 fill=%22%230b0b10%22/%3E%3Crect x=%226%22 y=%226%22 width=%226%22 height=%226%22 fill=%22%2315151c%22/%3E%3Crect x=%2212%22 y=%226%22 width=%226%22 height=%226%22 fill=%22%2308080c%22/%3E%3Crect x=%2218%22 y=%226%22 width=%226%22 height=%226%22 fill=%22%2308080c%22/%3E%3Crect x=%2224%22 y=%226%22 width=%226%22 height=%226%22 fill=%22%231d1d26%22/%3E%3Crect x=%2230%22 y=%226%22 width=%226%22 height=%226%22 fill=%22%2308080c%22/%3E%3Crect x=%2236%22 y=%226%22 width=%226%22 height=%226%22 fill=%22%231d1d26%22/%3E%3Crect x=%2242%22 y=%226%22 width=%226%22 height=%226%22 fill=%22%230b0b10%22/%3E%3C/svg%3E") repeat-x left bottom / 48px 12px, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22192%22 height=%22192%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%2272%22 y=%22152%22 width=%228%22 height=%228%22 fill=%22%232fcfc1%22/%3E%3Crect x=%2280%22 y=%22152%22 width=%228%22 height=%228%22 fill=%22%232fcfc1%22/%3E%3Crect x=%2272%22 y=%22160%22 width=%228%22 height=%228%22 fill=%22%234eeadb%22/%3E%3Crect x=%2272%22 y=%22152%22 width=%224%22 height=%224%22 fill=%22%23a8fff6%22/%3E%3Crect x=%2216%22 y=%22136%22 width=%228%22 height=%228%22 fill=%22%23f4c93b%22/%3E%3Crect x=%2224%22 y=%22136%22 width=%228%22 height=%228%22 fill=%22%23f4c93b%22/%3E%3Crect x=%2216%22 y=%22144%22 width=%228%22 height=%228%22 fill=%22%23e2b42c%22/%3E%3Crect x=%2224%22 y=%22144%22 width=%228%22 height=%228%22 fill=%22%23e2b42c%22/%3E%3Crect x=%2216%22 y=%22136%22 width=%224%22 height=%224%22 fill=%22%23fff0a8%22/%3E%3Crect x=%22112%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%23e33b3b%22/%3E%3Crect x=%22120%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%23b82a2a%22/%3E%3Crect x=%22112%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%23e33b3b%22/%3E%3Crect x=%22112%22 y=%2248%22 width=%224%22 height=%224%22 fill=%22%23ff8a8a%22/%3E%3Crect x=%2232%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%23d8af93%22/%3E%3Crect x=%2240%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%23b88f73%22/%3E%3Crect x=%2232%22 y=%2264%22 width=%228%22 height=%228%22 fill=%22%23d8af93%22/%3E%3Crect x=%2240%22 y=%2264%22 width=%228%22 height=%228%22 fill=%22%23b88f73%22/%3E%3Crect x=%2248%22 y=%2264%22 width=%228%22 height=%228%22 fill=%22%23b88f73%22/%3E%3Crect x=%2232%22 y=%2256%22 width=%224%22 height=%224%22 fill=%22%23f1d3bd%22/%3E%3Crect x=%22112%22 y=%22120%22 width=%228%22 height=%228%22 fill=%22%2326262e%22/%3E%3Crect x=%22120%22 y=%22120%22 width=%228%22 height=%228%22 fill=%22%2316161c%22/%3E%3Crect x=%22112%22 y=%22128%22 width=%228%22 height=%228%22 fill=%22%2326262e%22/%3E%3Crect x=%22120%22 y=%22128%22 width=%228%22 height=%228%22 fill=%22%2316161c%22/%3E%3Crect x=%22112%22 y=%22120%22 width=%224%22 height=%224%22 fill=%22%233a3a44%22/%3E%3Crect x=%2224%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%234eeadb%22/%3E%3Crect x=%2232%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%232fcfc1%22/%3E%3Crect x=%2224%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%232fcfc1%22/%3E%3Crect x=%2232%22 y=%2256%22 width=%228%22 height=%228%22 fill=%22%232fcfc1%22/%3E%3Crect x=%2224%22 y=%2248%22 width=%224%22 height=%224%22 fill=%22%23a8fff6%22/%3E%3Crect x=%22120%22 y=%22144%22 width=%228%22 height=%228%22 fill=%22%23e2b42c%22/%3E%3Crect x=%22128%22 y=%22144%22 width=%228%22 height=%228%22 fill=%22%23e2b42c%22/%3E%3Crect x=%22120%22 y=%22152%22 width=%228%22 height=%228%22 fill=%22%23f4c93b%22/%3E%3Crect x=%22128%22 y=%22152%22 width=%228%22 height=%228%22 fill=%22%23e2b42c%22/%3E%3Crect x=%22120%22 y=%22144%22 width=%224%22 height=%224%22 fill=%22%23fff0a8%22/%3E%3Crect x=%2216%22 y=%2280%22 width=%228%22 height=%228%22 fill=%22%23e33b3b%22/%3E%3Crect x=%2224%22 y=%2280%22 width=%228%22 height=%228%22 fill=%22%23b82a2a%22/%3E%3Crect x=%2216%22 y=%2288%22 width=%228%22 height=%228%22 fill=%22%23e33b3b%22/%3E%3Crect x=%2224%22 y=%2288%22 width=%228%22 height=%228%22 fill=%22%23e33b3b%22/%3E%3Crect x=%2232%22 y=%2288%22 width=%228%22 height=%228%22 fill=%22%23b82a2a%22/%3E%3Crect x=%2216%22 y=%2280%22 width=%224%22 height=%224%22 fill=%22%23ff8a8a%22/%3E%3Crect x=%2288%22 y=%2240%22 width=%228%22 height=%228%22 fill=%22%23b88f73%22/%3E%3Crect x=%2296%22 y=%2240%22 width=%228%22 height=%228%22 fill=%22%23b88f73%22/%3E%3Crect x=%2288%22 y=%2248%22 width=%228%22 height=%228%22 fill=%22%23d8af93%22/%3E%3Crect x=%2288%22 y=%2240%22 width=%224%22 height=%224%22 fill=%22%23f1d3bd%22/%3E%3C/svg%3E") repeat 0 0 / 192px 192px; opacity: .6; -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%); mask-image: linear-gradient(180deg, transparent, #000 55%); }
html[data-ui="2"] .foot-in { position: relative; z-index: 2; margin-top: 40px; padding: 36px 36px 30px; border-radius: 22px; background: linear-gradient(180deg, rgba(15, 15, 24, .94), rgba(9, 9, 15, .96)); border: 1px solid rgba(255, 255, 255, .11); box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .08); }
html[data-ui="2"] .foot-in::before { content: ''; position: absolute; left: 36px; right: 36px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, #ff3b4e, #ffc83a, transparent); }
html[data-ui="2"] .foot-col b { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; font: 400 14px/1.2 var(--f-px); letter-spacing: .09em; text-transform: uppercase; color: var(--fc, #ffc83a); }
html[data-ui="2"] .foot-col b::before { content: ''; width: 9px; height: 9px; background: currentColor; box-shadow: 3px 3px 0 rgba(0, 0, 0, .6); }
html[data-ui="2"] .foot-in > :nth-child(2) { --fc: #6fe05a; } html[data-ui="2"] .foot-in > :nth-child(3) { --fc: #35d6e8; } html[data-ui="2"] .foot-in > :nth-child(4) { --fc: #ffc83a; }
html[data-ui="2"] .foot-col a { display: block; padding: 4px 0; color: #c8cde0; text-decoration: none; transition: color .15s, transform .15s; }
html[data-ui="2"] .foot-col a:hover { color: #fff; transform: translateX(5px); }
html[data-ui="2"] .foot-brand p { color: #b4bad0; }
html[data-ui="2"] .foot-in > .foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 18px; padding: 18px 0 0; border-top: 1px dashed rgba(255, 255, 255, .16); background: none; font-size: 13px; color: #aab1c8; }
html[data-ui="2"] .foot-legal a { color: #d6dbee; }
html[data-ui="2"] .foot .grass-edge { display: none; }
.foot-big { position: absolute; left: 50%; bottom: -26px; z-index: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none; font: 400 clamp(90px, 19vw, 260px)/.8 var(--f-px); letter-spacing: .02em; color: transparent; background: linear-gradient(180deg, rgba(255, 59, 78, .5), rgba(255, 59, 78, 0)); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px rgba(255, 255, 255, .07); user-select: none; }
.foot-torch { position: absolute; top: 90px; left: max(8px, calc(50% - 660px)); z-index: 1; width: 24px; height: 56px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2256%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%228%22 y=%2220%22 width=%228%22 height=%2236%22 fill=%22%236b4a2b%22/%3E%3Crect x=%228%22 y=%2220%22 width=%224%22 height=%2236%22 fill=%22%2385603a%22/%3E%3Crect x=%224%22 y=%228%22 width=%2216%22 height=%2216%22 fill=%22%23ff7a1a%22/%3E%3Crect x=%228%22 y=%224%22 width=%228%22 height=%228%22 fill=%22%23ffd34d%22/%3E%3Crect x=%228%22 y=%2212%22 width=%228%22 height=%228%22 fill=%22%23fff2a0%22/%3E%3C/svg%3E") no-repeat center / 24px 56px; animation: mc-torch 1.6s steps(2) infinite; pointer-events: none; }
.foot-torch.r { left: auto; right: max(8px, calc(50% - 660px)); }
.foot-torch::before { content: ''; position: absolute; left: -90px; top: -70px; width: 204px; height: 204px; background: radial-gradient(circle, rgba(255, 150, 40, .3), transparent 66%); }
@keyframes mc-torch { 50% { opacity: .82; } }
@media (max-width: 1100px) { .foot-torch { display: none; } }
@media (min-width: 1001px) and (hover: hover) { html[data-ui="2"] .foot-dirt { padding-bottom: 120px; } }
@media (max-width: 760px) { html[data-ui="2"] .foot-in { padding: 24px 20px; } }
.lite-toggle { padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(0, 0, 0, .35); color: inherit; font: 600 12.5px/1 var(--f-ui); cursor: pointer; }
.lite-toggle:hover { background: rgba(255, 255, 255, .12); }

/* continuidad entre el mundo de la portada y la cinta */
html[data-ui="2"] .hero { border-bottom: 0; }
html[data-ui="2"] .tick { margin-top: -1px; background: linear-gradient(180deg, #08080d, #14131a); border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
html[data-ui="2"] .tick-l { border-right-color: rgba(255, 255, 255, .12); }
html[data-ui="2"] .tick-i { color: #e8ebf7; } html[data-ui="2"] .tick-i small { color: #8d96ad; } html[data-ui="2"] .tick-i:hover { background: rgba(255, 255, 255, .08); }

/* modo ligero: sin animaciones ni efectos costosos (equipos modestos o activado a mano) */
html.lite *, html.lite *::before, html.lite *::after { animation: none !important; transition: none !important; }
html.lite { scroll-behavior: auto; }
html.lite .top, html.lite .tick, html.lite .hero-stats li, html.lite .scene-tag, html.lite .hero-new { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lite[data-ui="2"] body { background-image: none; }
html.lite[data-ui="2"] body::before, html.lite .mc-orb, html.lite .mc-cloud, html.lite .mc-star, html.lite .hero::after, html.lite .foot-torch::before, html.lite .foot-big { display: none !important; }
html.lite .tick-track { animation: none !important; overflow-x: auto; width: auto; }
html.lite .mc-xp i { transition: none; }
html.lite .rcard:hover, html.lite .cat:hover, html.lite .btn:hover { transform: none !important; }
html.lite [data-reveal], html.lite .rv-pre { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) { .mc-cloud, .mc-orb, .tick-track, .tick-l i, .foot-torch, .mc-star { animation: none; } .mc-orb { opacity: .7; } .tick-track { overflow-x: auto; } }