/* Manza's Bot — landing: demos que se tocan, mosaico y camino de pasos (2026-10-08).
   Usa los tokens de manzasbot-premium.html (--gold-2, --apple-2, --leaf, --ease-*). Sin bordes blancos (decisión del dueño):
   la separación la dan el fondo, el desenfoque y las sombras. Movimiento solo con transform/opacity; todo respeta prefers-reduced-motion. */

.mz-ic{ width:22px; height:22px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; --mz-ac:hsl(var(--apple-2)/.32); }
svg .ac{ fill:var(--mz-ac); }
.mz-hl{ color:hsl(var(--gold-2)); font-style:normal; }

/* ---------- botones propios de las demos ---------- */
.mz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font:600 14px/1 Inter, system-ui, sans-serif; color:hsl(var(--text)); padding:13px 20px; border-radius:9999px; border:0;
  background:rgba(255,255,255,.08);
  transition:transform .16s cubic-bezier(.23,1,.32,1), background-color .2s ease, opacity .2s ease, box-shadow .25s ease;
}
.mz-btn:active:not(:disabled){ transform:scale(.97); }
.mz-btn:disabled{ opacity:.45; cursor:not-allowed; }
.mz-btn-solid{ background:linear-gradient(135deg, hsl(var(--gold-2)), hsl(var(--gold))); color:#2a1805; box-shadow:0 8px 28px hsl(var(--gold-2)/.28); }
.mz-btn-mini{ padding:9px 14px; font-size:13px; }
@media (hover:hover) and (pointer:fine){
  .mz-btn:hover:not(:disabled){ background:rgba(255,255,255,.14); }
  .mz-btn-solid:hover:not(:disabled){ background:linear-gradient(135deg, hsl(var(--gold-2)), hsl(var(--gold-2))); box-shadow:0 10px 34px hsl(var(--gold-2)/.4); }
}

/* ---------- sección demos ---------- */
.mz-demos{ padding:96px 24px 40px; }
.mz-demos-head{ max-width:640px; margin:0 0 44px; }
.mz-demos-head h2{ font-weight:800; font-size:clamp(30px,4.4vw,52px); line-height:1.04; letter-spacing:-1.4px; margin-top:6px; text-wrap:balance; }
.mz-demos-head p{ color:hsl(var(--muted)); font-size:17px; line-height:1.6; margin-top:16px; max-width:520px; }
.mz-demos-body{ display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:28px; align-items:start; }

.mz-tabs{ position:relative; display:flex; flex-direction:column; gap:6px; }
.mz-tab{
  position:relative; z-index:1; display:flex; gap:14px; align-items:flex-start; text-align:left; cursor:pointer;
  padding:18px 18px 18px 22px; border:0; border-radius:20px; background:transparent; color:hsl(var(--muted));
  font-family:inherit; transition:color .25s ease, transform .16s cubic-bezier(.23,1,.32,1);
}
.mz-tab:active{ transform:scale(.985); }
.mz-tab .mz-ic{ margin-top:2px; width:24px; height:24px; }
.mz-tab-txt{ display:flex; flex-direction:column; gap:5px; }
.mz-tab-txt b{ font:700 16px/1.25 'Montserrat', sans-serif; color:hsl(var(--text)); }
.mz-tab-txt span{ font-size:13.5px; line-height:1.5; }
.mz-tab[aria-selected="true"]{ color:hsl(var(--text)); }
.mz-tab[aria-selected="true"] .mz-ic{ color:hsl(var(--gold-2)); }
.mz-tab-bar{
  position:absolute; left:0; top:0; width:100%; height:100px; border-radius:20px; z-index:0; pointer-events:none;
  background:linear-gradient(120deg, hsl(var(--gold-2)/.14), hsl(var(--apple-2)/.08) 70%), rgba(255,255,255,.04);
  transform:translateY(var(--bar-y, 0px)) scaleY(var(--bar-s, 1)); transform-origin:top;
  transition:transform .5s cubic-bezier(.32,.72,0,1);
}

.mz-stage{
  position:relative; border-radius:30px; padding:22px; min-height:468px;
  background:radial-gradient(120% 90% at 0% 0%, hsl(var(--gold-2)/.10), transparent 55%), rgba(18,18,26,.42);
  box-shadow:0 30px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 60px rgba(255,255,255,.015);
  -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%);
}
.mz-panel[hidden]{ display:none; }
.mz-panel{ animation:mzEntra .42s cubic-bezier(.23,1,.32,1) both; outline-offset:6px; }
@keyframes mzEntra{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }

/* ---------- demo 1: códigos ---------- */
.mz-win{ border-radius:20px; padding:16px 18px 18px; background:rgba(255,255,255,.04); }
.mz-win-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.mz-win-title{ font:600 12px/1 Inter, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--muted)); }
.mz-win-pill{ font:600 12px/1 Inter, sans-serif; padding:6px 11px; border-radius:9999px; color:hsl(var(--gold-2)); background:hsl(var(--gold-2)/.12); }
.mz-cod-row{ display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.mz-cod-code{ display:flex; font:700 clamp(22px,3.4vw,34px)/1 'JetBrains Mono', monospace; letter-spacing:-.5px; }
.mz-cod-code span:nth-child(1){ color:hsl(var(--gold-2)); }
.mz-cod-code span:nth-child(2){ color:#fff; }
.mz-cod-code span:nth-child(3){ color:hsl(var(--apple-2)); }
.mz-cod-parts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.mz-chipc{ display:inline-flex; gap:8px; align-items:baseline; padding:7px 12px; border-radius:12px; background:rgba(255,255,255,.05); font-size:12px; }
.mz-chipc b{ font:700 13px 'JetBrains Mono', monospace; color:#fff; }
.mz-chipc i{ font-style:normal; color:hsl(var(--muted)); }

.mz-chat{ margin-top:14px; border-radius:20px; padding:16px; background:rgba(43,45,49,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); min-height:236px; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.mz-chat-vacio{ margin:auto; text-align:center; color:#9aa0a8; font-size:14px; max-width:260px; line-height:1.6; }
.mz-chat-vacio b{ color:#fff; }
.mz-msg{ display:flex; gap:12px; opacity:0; transform:translateY(12px); transition:opacity .38s cubic-bezier(.23,1,.32,1), transform .38s cubic-bezier(.23,1,.32,1); }
.mz-msg.in{ opacity:1; transform:none; }
.mz-av{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#1e1f22; }
.mz-av-u{ display:flex; align-items:center; justify-content:center; font:700 15px Inter, sans-serif; color:#fff; background:linear-gradient(135deg,#5865f2,#7a86ff); }
.mz-msg-h{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:14px; }
.mz-msg-h b{ color:#fff; font-weight:600; }
.mz-bot{ font:700 10px/1 Inter, sans-serif; padding:3px 5px; border-radius:4px; background:#5865f2; color:#fff; letter-spacing:.02em; }
.mz-msg-h time{ font-size:12px; color:#949ba4; }
.mz-ch{ font:500 12px 'JetBrains Mono', monospace; color:#9aa0a8; background:rgba(255,255,255,.06); padding:2px 7px; border-radius:6px; }
.mz-h1{ font:800 clamp(26px,4vw,34px)/1.15 Inter, sans-serif; color:#f2f3f5; margin-top:4px; letter-spacing:-.3px; }
.mz-cmd{ color:#dbdee1; font:400 15px 'JetBrains Mono', monospace; margin-top:3px; min-height:1.4em; }
.mz-cmd .cur{ display:inline-block; width:8px; height:16px; margin-left:1px; background:#dbdee1; vertical-align:-2px; animation:mzParp 1s steps(2) infinite; }
@keyframes mzParp{ 50%{ opacity:0; } }
.mz-ok{ margin-top:6px; border-radius:6px; padding:12px 14px; background:#232428; display:flex; gap:10px; align-items:center; color:#dbdee1; font-size:14px; line-height:1.4; }
.mz-ok svg{ width:20px; height:20px; color:#23a55a; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- demo 2: cofre ---------- */
.mz-cofre-zona{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:424px; position:relative; }
  background:radial-gradient(closest-side, var(--luz, hsl(var(--gold-2)/.65)), transparent 72%); transition:opacity .5s ease, transform .7s cubic-bezier(.23,1,.32,1); }
.mz-premio-wrap{ min-height:132px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; }
.mz-cofre-hint{ color:hsl(var(--muted)); font-size:14px; margin-top:6px; }
.mz-premio{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 26px; border-radius:22px; min-width:230px;
  background:rgba(255,255,255,.06); box-shadow:0 0 0 1px var(--rc, #fff) inset, 0 16px 44px color-mix(in srgb, var(--rc, #fff) 30%, transparent);
  animation:mzPremio .62s cubic-bezier(.23,1,.32,1) both; }
@keyframes mzPremio{ from{ opacity:0; transform:translateY(24px) scale(.88); } to{ opacity:1; transform:none; } }
.mz-premio[hidden]{ display:none; }
.mz-prem-rar{ font:700 11px/1 Inter, sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--rc, #fff); }
.mz-prem-ic{ width:34px; height:34px; fill:none; stroke:var(--rc, #fff); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; --mz-ac:color-mix(in srgb, var(--rc, #fff) 30%, transparent); }
.mz-premio b{ font:800 20px/1.2 'Montserrat', sans-serif; }
.mz-premio span:last-child{ font-size:13px; color:hsl(var(--muted)); }

/* ---------- demo 3: trade ---------- */
.mz-trade{ display:flex; flex-direction:column; gap:16px; }
.mz-trade-mesa{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch; }
.mz-oferta{ border-radius:20px; padding:16px; background:rgba(255,255,255,.05); min-height:170px; display:flex; flex-direction:column; gap:10px; transition:background-color .3s ease; }
.mz-oferta.listo{ background:hsl(var(--leaf)/.18); }
.mz-oferta h4{ font:700 13px Inter, sans-serif; letter-spacing:.1em; text-transform:uppercase; color:hsl(var(--muted)); }
.mz-of-lista{ list-style:none; display:flex; flex-direction:column; gap:7px; flex:1; }
.mz-of-lista li{ display:flex; gap:9px; align-items:center; padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.07); font-size:14px; font-weight:500;
  animation:mzItem .36s cubic-bezier(.23,1,.32,1) both; transition:transform .5s cubic-bezier(.32,.72,0,1), opacity .4s ease; }
@keyframes mzItem{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
.mz-trade.cruzando .mz-oferta:first-child .mz-of-lista li{ transform:translateX(52px); opacity:0; }
.mz-trade.cruzando .mz-oferta-otro .mz-of-lista li{ transform:translateX(-52px); opacity:0; }
.mz-vacio{ color:hsl(var(--muted)); font-size:13px; justify-content:center; background:transparent !important; box-shadow:0 0 0 1.5px rgba(255,255,255,.1) inset; border-radius:12px; }
.mz-estado{ font-size:13px; color:hsl(var(--muted)); font-weight:600; }
.mz-oferta.listo .mz-estado{ color:#6fe08f; }
.mz-trade-medio{ display:flex; align-items:center; color:hsl(var(--gold-2)); }
.mz-trade-medio .mz-ic{ width:30px; height:30px; }
.mz-inv{ display:flex; flex-wrap:wrap; gap:8px; }
.mz-item{ display:inline-flex; align-items:center; gap:9px; padding:11px 15px; border-radius:9999px; border:0; cursor:pointer; font:500 14px Inter, sans-serif; color:hsl(var(--text));
  background:rgba(255,255,255,.07); transition:transform .16s cubic-bezier(.23,1,.32,1), background-color .2s ease, box-shadow .2s ease; }
.mz-item:active:not(:disabled){ transform:scale(.96); }
.mz-item[aria-pressed="true"]{ background:hsl(var(--gold-2)/.2); box-shadow:0 0 0 1.5px hsl(var(--gold-2)/.7) inset; }
.mz-item:disabled{ opacity:.5; cursor:not-allowed; }
.mz-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.mz-dot.d1{ background:conic-gradient(#ff5f6d,#ffc371,#7bed9f,#70a1ff,#ff5f6d); } .mz-dot.d2{ background:#7fdbff; } .mz-dot.d3{ background:#b57bff; } .mz-dot.d4{ background:#ffd36e; } .mz-dot.d5{ background:#ff8a65; } .mz-dot.d6{ background:#7bed9f; }
.mz-trade-acc{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mz-trade-msg{ flex:1 1 220px; font-size:14px; color:hsl(var(--muted)); line-height:1.5; }
@media (hover:hover) and (pointer:fine){ .mz-item:hover:not(:disabled):not([aria-pressed="true"]){ background:rgba(255,255,255,.13); } }

/* ---------- mosaico ---------- */
.mz-bento{ padding:72px 24px 40px; }
.mz-bento-head{ margin:0 0 30px; max-width:560px; }
.mz-bento-head h3{ font-weight:800; font-size:clamp(24px,3.2vw,38px); letter-spacing:-.8px; line-height:1.1; text-wrap:balance; }
.mz-bento-head p{ color:hsl(var(--muted)); margin-top:10px; font-size:15px; }
.mz-bento-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.mz-tile{ position:relative; padding:24px; background:rgba(20,20,28,.40); -webkit-backdrop-filter:blur(26px) saturate(185%); backdrop-filter:blur(26px) saturate(185%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:10px; overflow:hidden; transition:transform .38s cubic-bezier(.23,1,.32,1), box-shadow .3s ease; }
.mz-tile header{ display:flex; align-items:center; gap:11px; }
.mz-tile h4{ font:700 17px/1.2 'Montserrat', sans-serif; }
.mz-tile p{ color:hsl(var(--muted)); font-size:14px; line-height:1.55; }
.mz-tile .mz-ic{ width:26px; height:26px; color:var(--tc, hsl(var(--gold-2))); --mz-ac:color-mix(in srgb, var(--tc, hsl(var(--gold-2))) 28%, transparent); }
@media (hover:hover) and (pointer:fine){ .mz-tile:hover{ transform:translateY(-5px); box-shadow:0 22px 50px rgba(0,0,0,.4); } }

.mz-t-embed{ grid-column:span 7; border-radius:32px 32px 32px 12px; background:linear-gradient(140deg, hsl(var(--gold-2)/.12), transparent 55%), rgba(20,20,28,.40); }
.mz-t-tickets{ grid-column:span 5; border-radius:12px 32px 32px 32px; --tc:hsl(var(--apple-2)); }
.mz-t-roles{ grid-column:span 4; border-radius:26px; --tc:#b57bff; }
.mz-t-sorteo{ grid-column:span 4; border-radius:26px 26px 26px 44px; --tc:hsl(var(--gold-2)); background:linear-gradient(200deg, hsl(var(--gold-2)/.10), transparent 60%), rgba(20,20,28,.40); }
.mz-t-subasta{ grid-column:span 4; border-radius:44px 26px 26px 26px; --tc:#7bed9f; background:linear-gradient(160deg, hsl(var(--leaf)/.18), transparent 60%), rgba(20,20,28,.40); }
.mz-t-pronto{ grid-column:span 4; border-radius:26px; background:rgba(255,255,255,.025); box-shadow:0 0 0 1.5px rgba(255,255,255,.10) inset; --tc:hsl(var(--muted)); }
/* jugadores destacados (gente real: foto, nombre y sus números) */
#comunidad[hidden]{ display:none !important; }
/* botón "Invitar" pegado abajo, SOLO en celular: aparece al pasar el título y se va cuando ya hay otro botón de invitar a la vista */
.mz-pegado{ display:none; }
@media (max-width:720px){
  .mz-pegado{
    display:flex; align-items:center; justify-content:center; gap:10px; position:fixed; z-index:60;
    left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); min-height:52px; padding:0 20px;
    border-radius:999px; font:700 15px/1 'Montserrat', sans-serif; color:#241a04; text-decoration:none;
    background:linear-gradient(90deg, #ffc94d, #ff8a3d); box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18) inset;
    transform:translateY(140%); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .32s cubic-bezier(0.32,0.72,0,1), opacity .2s ease, visibility 0s .32s;
  }
  .mz-pegado.ver{ transform:none; opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
  .mz-pegado.ver:active{ transform:scale(.97); transition-duration:.12s; }
  html[data-motion="reduced"] .mz-pegado{ transform:none; transition:opacity .2s ease, visibility 0s .2s; }
}
.mz-dest{ display:flex; align-items:center; gap:14px; }
.mz-dest img{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px hsl(var(--gold-2) / .55); }
.mz-dest b{ display:block; font:700 17px/1.2 'Montserrat', sans-serif; overflow-wrap:anywhere; }
.mz-dest span{ display:block; color:hsl(var(--gold-2)); font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-top:3px; }
.mz-dest-num{ display:flex; gap:22px; margin-top:18px; font-variant-numeric:tabular-nums; }
.mz-dest-num div{ min-width:0; }
.mz-dest-num b{ display:block; font:800 24px/1.1 'Montserrat', sans-serif; }
.mz-dest-num small{ color:hsl(var(--muted)); font-size:12.5px; }
.mz-dest-frase{ margin:16px 0 0; color:hsl(var(--text)); font-size:14.5px; line-height:1.55; }
/* AutoMod / AutoNicks ya están hechos: misma grilla que antes, pero con color propio (antes iban apagados con "Pronto") */
.mz-t-pronto.mz-t-listo{ background:linear-gradient(120deg, color-mix(in srgb, var(--tc) 14%, transparent), transparent 65%), rgba(20,20,28,.40); box-shadow:none; }
.mz-t-adivina{ grid-column:span 4; border-radius:26px; --tc:#70a1ff; background:linear-gradient(120deg, rgba(112,161,255,.12), transparent 65%), rgba(20,20,28,.40); }
.mz-pronto{ margin-left:auto; font:700 11px/1 Inter, sans-serif; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border-radius:9999px; background:rgba(255,255,255,.08); color:hsl(var(--muted)); }

.mz-embed-prev{ display:flex; gap:12px; margin-top:6px; padding:14px; border-radius:12px; background:#2b2d31; }
.mz-embed-bar{ width:4px; border-radius:4px; background:hsl(var(--gold-2)); flex-shrink:0; }
.mz-embed-prev b{ display:block; color:#fff; font-size:15px; }
.mz-embed-prev span{ display:block; color:#dbdee1; font-size:13.5px; margin-top:4px; line-height:1.45; }
.mz-embed-campos{ display:flex; gap:22px; margin-top:10px; }
.mz-embed-campos em{ font-style:normal; font-size:12px; color:#9aa0a8; }
.mz-embed-campos strong{ display:block; color:#fff; font-size:13.5px; margin-top:2px; }
.mz-tk{ list-style:none; display:flex; flex-direction:column; gap:7px; margin-top:4px; }
.mz-tk li{ display:flex; gap:10px; align-items:center; font-size:13.5px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.05); color:hsl(var(--text)); }
.mz-tk b{ font:600 12px 'JetBrains Mono', monospace; color:hsl(var(--muted)); }
.mz-tk i{ margin-left:auto; font-style:normal; font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:9999px; background:rgba(255,255,255,.07); color:hsl(var(--muted)); }
.mz-tk i.abierto{ background:hsl(var(--apple-2)/.2); color:hsl(var(--apple-2)); }
.mz-roles{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.mz-rolpill{ border:0; cursor:pointer; padding:10px 16px; border-radius:9999px; font:600 14px Inter, sans-serif; color:hsl(var(--text)); background:rgba(255,255,255,.07);
  transition:transform .38s cubic-bezier(.23,1,.32,1), background-color .2s ease, color .2s ease; }
.mz-rolpill:active{ transform:scale(.94); }
.mz-rolpill[aria-pressed="true"]{ background:#b57bff; color:#1b0f2b; transform:scale(1.04); }
.mz-cuenta{ margin-top:auto; padding-top:12px; }
.mz-cuenta b{ display:block; font:700 clamp(30px,3.4vw,42px)/1 'JetBrains Mono', monospace; letter-spacing:-1px; color:#fff; }
.mz-cuenta span{ font-size:13px; color:hsl(var(--muted)); }
.mz-puja{ margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mz-puja b{ font:700 24px 'JetBrains Mono', monospace; color:#fff; display:inline-block; }
.mz-puja b.sube{ animation:mzSube .4s cubic-bezier(.23,1,.32,1); }
@keyframes mzSube{ from{ transform:translateY(8px) scale(.92); opacity:.4; } to{ transform:none; opacity:1; } }

/* ---------- camino de pasos ---------- */
.mz-camino-wrap{ position:relative; max-width:900px; margin:0 auto; }
.mz-camino{ list-style:none; position:relative; display:flex; flex-direction:column; gap:64px; padding:10px 0; }
.mz-paso{ position:relative; width:calc(50% - 58px); }
.mz-paso-der{ margin-left:auto; margin-top:-24px; }
.mz-paso-num{ position:absolute; top:18px; right:-86px; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:800 24px 'Montserrat', sans-serif; color:#2a1805; background:linear-gradient(135deg, hsl(var(--gold-2)), hsl(var(--gold))); box-shadow:0 0 0 8px rgba(8,8,12,.7), 0 10px 30px hsl(var(--gold-2)/.3); }
.mz-paso-der .mz-paso-num{ right:auto; left:-86px; }
.mz-paso-card{ position:relative; overflow:hidden; padding:30px; border-radius:30px 30px 8px 30px; background:rgba(20,20,28,.40); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter:blur(26px) saturate(185%); backdrop-filter:blur(26px) saturate(185%); transition:transform .4s cubic-bezier(.23,1,.32,1); }
.mz-paso-der .mz-paso-card{ border-radius:30px 30px 30px 8px; }
.mz-paso-card .mz-ic{ width:30px; height:30px; color:hsl(var(--gold-2)); margin-bottom:14px; --mz-ac:hsl(var(--gold-2)/.22); }
.mz-paso-card h4{ font:700 22px/1.2 'Montserrat', sans-serif; margin-bottom:8px; }
.mz-paso-card p{ color:hsl(var(--muted)); font-size:15px; line-height:1.6; }
@media (hover:hover) and (pointer:fine){ .mz-paso-card:hover{ transform:translateY(-5px); } }

/* escalonado en testimonios (antes: 3 tarjetas idénticas alineadas) */
.testi-grid{ align-items:start; }
.testi-grid .testi-card:nth-child(2){ margin-top:34px; }
.testi-grid .testi-card:nth-child(3){ margin-top:12px; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .mz-demos-body{ grid-template-columns:1fr; }
  .mz-tabs{ flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:6px; scrollbar-width:none; }
  .mz-tab{ flex:0 0 auto; padding:14px 18px; align-items:center; }
  .mz-tab-txt span{ display:none; }
  .mz-tab-bar{ display:none; }
  .mz-tab[aria-selected="true"]{ background:hsl(var(--gold-2)/.14); }
  .mz-t-embed, .mz-t-tickets{ grid-column:span 12; }
  .mz-t-roles, .mz-t-sorteo, .mz-t-subasta, .mz-t-pronto, .mz-t-adivina{ grid-column:span 6; }
}
@media (max-width:640px){
  .mz-demos{ padding-top:64px; }
  .mz-stage{ padding:14px; border-radius:24px; }
  .mz-trade-mesa{ grid-template-columns:1fr; } .mz-trade-medio{ justify-content:center; transform:rotate(90deg); }
  .mz-t-roles, .mz-t-sorteo, .mz-t-subasta, .mz-t-pronto, .mz-t-adivina{ grid-column:span 12; }
    .mz-paso, .mz-paso-der{ width:auto; margin:0; padding-left:86px; }
  .mz-paso-num, .mz-paso-der .mz-paso-num{ left:0; right:auto; }
  .testi-grid .testi-card:nth-child(n){ margin-top:0; }
}


/* ================= ANIMACIONES (2026-10-08): entrada con desenfoque, luz que sigue al cursor, inclinación, cofre que respira ================= */
/* entrada: sube, se agranda un poco y se "enfoca" (el desenfoque disimula el cambio, ver emil-design-eng) */
.mz-tile.reveal, .mz-paso.reveal, .mz-demos-body.reveal, .mz-bento-head.reveal, .mz-demos-head.reveal{
  filter:blur(10px); transform:translateY(34px) scale(.96);
  transition:opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1), filter .9s cubic-bezier(.23,1,.32,1);
}
.mz-tile.reveal.in, .mz-paso.reveal.in, .mz-demos-body.reveal.in, .mz-bento-head.reveal.in, .mz-demos-head.reveal.in{ filter:none; transform:none; }
.mz-paso .mz-paso-num{ transform:scale(.55); opacity:0; transition:transform .8s cubic-bezier(.23,1,.32,1) .25s, opacity .5s ease .25s; }
.mz-paso.in .mz-paso-num{ transform:none; opacity:1; }
.mz-tab .mz-ic{ transition:transform .5s cubic-bezier(.23,1,.32,1), color .25s ease; }
.mz-tab[aria-selected="true"] .mz-ic{ transform:scale(1.18) rotate(-6deg); }

/* luz que sigue al cursor sobre el vidrio */
.mz-stage::before, .mz-tile::after, .mz-paso-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:0;
  background:radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.10), hsl(var(--gold-2)/.05) 45%, transparent 70%);
  transition:opacity .35s ease;
}
.mz-tile > *, .mz-paso-card > *, .mz-stage > *{ position:relative; z-index:1; }
.mz-stage:hover::before, .mz-tile:hover::after, .mz-paso-card:hover::after{ opacity:1; }

/* inclinación 3D con el mouse (la mueve manza-landing.js con --tilt) */
@media (hover:hover) and (pointer:fine){
  .mz-tile:hover{ transform:var(--tilt, translateY(-6px) scale(1.012)); box-shadow:0 26px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12); }
  .mz-paso-card:hover{ transform:var(--tilt, translateY(-6px) scale(1.015)); }
}
.mz-tile, .mz-paso-card{ transition:transform .28s cubic-bezier(.23,1,.32,1), box-shadow .3s ease; }

/* título y botón principal con vida */
.mz-hl{ display:inline-block; animation:mzBrillo 4.2s ease-in-out infinite; }
@keyframes mzBrillo{ 0%,100%{ color:hsl(var(--gold-2)); } 50%{ color:hsl(var(--apple-2)); } }
.mz-btn-solid{ animation:mzPulso 2.8s ease-in-out infinite; }
@keyframes mzPulso{ 0%,100%{ box-shadow:0 8px 28px hsl(var(--gold-2)/.28); } 50%{ box-shadow:0 10px 38px hsl(var(--gold-2)/.5); } }
.mz-btn-solid:disabled{ animation:none; }
/* los trozos del código se mueven en cascada */
.mz-cod-code span{ display:inline-block; animation:mzLetra 3.6s ease-in-out infinite; }
.mz-cod-code span:nth-child(2){ animation-delay:.18s; } .mz-cod-code span:nth-child(3){ animation-delay:.36s; }
@keyframes mzLetra{ 0%,60%,100%{ transform:translateY(0); } 30%{ transform:translateY(-5px); } }
.mz-tk li{ animation:mzItem .5s cubic-bezier(.23,1,.32,1) both; } .mz-tk li:nth-child(2){ animation-delay:.08s; } .mz-tk li:nth-child(3){ animation-delay:.16s; }
.mz-pronto{ animation:mzPulsoSuave 2.6s ease-in-out infinite; }
@keyframes mzPulsoSuave{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }
/* ya entró: la transición larga de la entrada no debe frenar la inclinación del mouse */
.mz-tile.reveal.in, .mz-paso.reveal.in .mz-paso-card{ transition:transform .28s cubic-bezier(.23,1,.32,1), box-shadow .3s ease, opacity .9s ease, filter .6s ease; }


/* ================= camino discontinuo entre los pasos (2026-10-08) =================
   Un trazo que serpentea entre los 3 números: sus guiones corren hacia abajo todo el tiempo, se va "dibujando" con el scroll
   y un punto dorado lo recorre. La geometría la calcula manza-landing.js según dónde cae cada número (sirve en escritorio y celular). */
.mz-ruta-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0;
  clip-path:inset(0 0 100% 0); /* se abre con el scroll: lo escribe manza-landing.js (progresoRuta) */ }
.mz-camino{ z-index:1; }
.mz-ruta-base, .mz-ruta{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.mz-ruta-base{ stroke:hsl(var(--gold-2)/.14); stroke-width:3; stroke-dasharray:1 13; }
.mz-ruta{ stroke:hsl(var(--gold-2)); stroke-width:3.4; stroke-dasharray:2 13; animation:mzMarcha 1.1s linear infinite; filter:drop-shadow(0 0 6px hsl(var(--gold-2)/.55)); }
@keyframes mzMarcha{ to{ stroke-dashoffset:-30; } }
.mz-ruta-punto{ fill:hsl(var(--gold-2)); filter:drop-shadow(0 0 10px hsl(var(--gold-2))) drop-shadow(0 0 22px hsl(var(--apple-2)/.7)); }


/* ================= COFRE (rediseño 2026-10-08): madera, bronce y remaches; tapa que se voltea; apertura lenta y teatral ================= */
.mz-cofre{ position:relative; width:min(360px,82%); aspect-ratio:280/260; padding:0; border:0; background:transparent; cursor:pointer; border-radius:28px; margin-top:6px; }
.mz-cofre:focus-visible{ border-radius:28px; }
.mz-escena{ position:absolute; left:0; right:0; bottom:0; aspect-ratio:280/230; z-index:2; display:block; }
.mz-cuerpo, .mz-tapa, .mz-tapa svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:block; }
.mz-cuerpo{ filter:drop-shadow(0 18px 22px rgba(0,0,0,.5)); }
.mz-tapa{ transform-origin:50% 43.5%; will-change:transform; }
.mz-tapa-d{ opacity:0; }
.mz-tesoro{ opacity:0; transition:opacity .9s ease .35s; }
.mz-brillos path{ transform-box:fill-box; transform-origin:center; animation:mzBrilla 2.2s ease-in-out infinite; }
.mz-brillos path:nth-child(2){ animation-delay:.7s; } .mz-brillos path:nth-child(3){ animation-delay:1.4s; }
@keyframes mzBrilla{ 0%,100%{ opacity:.15; transform:scale(.5); } 50%{ opacity:1; transform:scale(1.15); } }
.mz-cofre.abierto .mz-tesoro{ opacity:1; }
.mz-candado{ transform-box:fill-box; transform-origin:50% 0; }
.mz-cofre:active:not(.abierto):not(.abriendo){ transform:scale(.975); transition:transform .16s cubic-bezier(.23,1,.32,1); }

/* reposo: respira y se ve brillar la cerradura */
.mz-cofre:not(.abierto):not(.abriendo) .mz-escena{ animation:mzRespira 4.2s ease-in-out infinite; }
@keyframes mzRespira{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.mz-cofre:not(.abierto):not(.abriendo) .mz-candado{ animation:mzOroBrilla 3.2s ease-in-out infinite; }
@keyframes mzOroBrilla{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.35) drop-shadow(0 0 6px hsl(var(--gold-2)/.8)); } }
/* carga la energía antes de abrir: la luz de la rendija sube */
.mz-cofre.abriendo .mz-cuerpo{ animation:mzCarga 1.1s ease-in forwards; }
@keyframes mzCarga{ from{ filter:drop-shadow(0 18px 22px rgba(0,0,0,.5)); } to{ filter:drop-shadow(0 18px 22px rgba(0,0,0,.5)) drop-shadow(0 0 22px var(--luz-c, hsl(var(--gold-2)/.7))); } }

/* luz detrás: halo + rayos giratorios (el color lo pone la rareza del premio) */
.mz-luz{ position:absolute; left:50%; top:40%; width:140%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; z-index:0; opacity:0; scale:.5; pointer-events:none;
  background:radial-gradient(closest-side, var(--luz-c, hsl(var(--gold-2)/.6)), transparent 72%);
  transition:opacity 1.5s cubic-bezier(.16,1,.3,1), scale 1.8s cubic-bezier(.16,1,.3,1); }
.mz-rayos{ position:absolute; left:50%; top:40%; width:165%; aspect-ratio:1; translate:-50% -50%; z-index:0; opacity:0; pointer-events:none; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc-c, #ffd36e) 38%, transparent) 0 5deg, transparent 5deg 16deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 8%, transparent 68%); mask-image:radial-gradient(closest-side, #000 8%, transparent 68%);
  animation:mzGira 22s linear infinite; transition:opacity 2s ease .3s; }
@keyframes mzGira{ to{ rotate:360deg; } }
.mz-cofre.abierto .mz-luz{ opacity:1; scale:1; }
.mz-cofre.abierto .mz-rayos{ opacity:.85; }

/* el objeto sale del cofre y queda flotando */
.mz-obj{ position:absolute; left:50%; top:2%; width:64px; height:64px; margin-left:-32px; z-index:3; opacity:0; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.mz-obj-ic{ width:100%; height:100%; fill:none; stroke:var(--rc, #fff); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; --mz-ac:color-mix(in srgb, var(--rc, #fff) 34%, transparent);
  filter:drop-shadow(0 0 14px var(--rc, #fff)); }
.mz-chispas{ position:absolute; left:50%; top:46%; width:0; height:0; z-index:4; pointer-events:none; }
.mz-chispa{ position:absolute; width:7px; height:7px; margin:-3.5px; border-radius:50%; background:var(--c, hsl(var(--gold-2))); box-shadow:0 0 10px var(--c, hsl(var(--gold-2))); }

/* el atributo hidden no puede perder contra display:inline-flex */
.mz-btn[hidden]{ display:none; }
/* capa del tesoro: encima de la tapa abierta, recortada para que quede escondido detrás del labio del cofre */
.mz-tesoro-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:block; clip-path:inset(-60px -20px 54.8% -20px); pointer-events:none; }

/* ================= demos nuevas (2026-10-08): mascotas, misterios, montaña rusa, sanciones + trade con confirmación animada ================= */
/* pestañas: la descripción solo se despliega en la activa (con 7 pestañas, si no, la lista sería enorme) */
.mz-tab-desc{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .45s cubic-bezier(.23,1,.32,1), opacity .3s ease; }
.mz-tab-desc > span{ overflow:hidden; min-height:0; }
.mz-tab[aria-selected="true"] .mz-tab-desc{ grid-template-rows:1fr; opacity:1; }
.mz-tab{ padding:14px 18px 14px 22px; }
.mz-tab-txt{ gap:0; }
.mz-tab[aria-selected="true"] .mz-tab-txt{ gap:5px; }
@media (max-width:980px){ .mz-tab-desc{ display:none; } }

/* ---------- trade: confirmación animada ---------- */
.mz-trade-mesa{ position:relative; }
.mz-trade-medio{ position:relative; width:64px; flex-direction:column; align-items:center; justify-content:center; display:flex; z-index:2; }
.mz-trade-medio .mz-ic-trade{ transition:opacity .3s ease, transform .5s cubic-bezier(.23,1,.32,1); }
.mz-anillo{ position:absolute; width:58px; height:58px; opacity:0; scale:.6; transition:opacity .35s ease, scale .6s cubic-bezier(.23,1,.32,1); }
.mz-anillo svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.mz-anillo circle{ fill:none; stroke-width:4; stroke-linecap:round; }
.mz-anillo-f{ stroke:rgba(255,255,255,.12); }
.mz-anillo-p{ stroke:hsl(var(--gold-2)); stroke-dasharray:138.23; stroke-dashoffset:138.23; filter:drop-shadow(0 0 8px hsl(var(--gold-2)/.8)); }
.mz-cuenta-n{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:800 24px/1 'Montserrat', sans-serif; color:#fff; }
.mz-cuenta-n.pop{ animation:mzPopN .5s cubic-bezier(.23,1,.32,1); }
@keyframes mzPopN{ from{ transform:scale(1.7); opacity:0; } to{ transform:none; opacity:1; } }
.mz-trade.confirmando .mz-anillo{ opacity:1; scale:1; }
.mz-trade.confirmando .mz-ic-trade{ opacity:0; transform:scale(.6); }
.mz-trade.confirmando .mz-anillo-p{ animation:mzAnillo 2.25s linear forwards; }
@keyframes mzAnillo{ to{ stroke-dashoffset:0; } }
/* haz de luz entre las dos ofertas mientras se confirma */
.mz-trade-mesa::before{ content:''; position:absolute; left:6%; right:6%; top:50%; height:3px; border-radius:3px; z-index:1; opacity:0; transform:scaleX(.1);
  background:linear-gradient(90deg, transparent, hsl(var(--gold-2)), #fff, hsl(var(--gold-2)), transparent); filter:drop-shadow(0 0 8px hsl(var(--gold-2))); }
.mz-trade.confirmando .mz-trade-mesa::before{ animation:mzHaz 2.25s cubic-bezier(.45,.05,.2,1) forwards; }
@keyframes mzHaz{ 0%{ opacity:0; transform:scaleX(.1); } 20%{ opacity:1; } 100%{ opacity:1; transform:scaleX(1); } }
.mz-trade.confirmando .mz-oferta{ background:hsl(var(--leaf)/.22); box-shadow:0 0 36px hsl(var(--gold-2)/.18), inset 0 1px 0 rgba(255,255,255,.1); animation:mzLatido 1.1s ease-in-out infinite; }
@keyframes mzLatido{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.012); } }
.mz-trade.completo .mz-oferta{ background:hsl(var(--leaf)/.26); }
.mz-trade.completo .mz-estado{ color:#6fe08f; animation:mzItem .5s cubic-bezier(.23,1,.32,1) both; }
@media (max-width:640px){ .mz-trade-mesa::before{ display:none; } .mz-trade-medio{ width:auto; height:64px; } }

/* ---------- mascotas ---------- */
.mz-pet{ display:flex; flex-direction:column; gap:14px; }
.mz-pet-escena{ position:relative; min-height:230px; display:flex; align-items:flex-end; justify-content:center; gap:clamp(20px,6vw,90px); padding:12px 0 0; }
.mz-huevo{ width:150px; height:187px; padding:0; border:0; background:transparent; cursor:pointer; border-radius:40%; transition:transform .16s cubic-bezier(.23,1,.32,1); }
.mz-huevo:disabled{ cursor:default; }
.mz-huevo:active:not(:disabled){ transform:scale(.96); }
.mz-huevo svg{ width:100%; height:100%; overflow:visible; display:block; }
.mz-huevo-g{ transform-box:fill-box; transform-origin:50% 100%; }
.mz-huevo:not(:disabled) .mz-huevo-g{ animation:mzHuevoIdle 2.8s ease-in-out infinite; }
@keyframes mzHuevoIdle{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-2.5deg) translateY(-3px); } }
.mz-grieta{ stroke-dasharray:1; stroke-dashoffset:1; }
.mz-huevo.roto .mz-grieta{ stroke-dashoffset:0; transition:stroke-dashoffset .8s cubic-bezier(.23,1,.32,1); }
.mz-pet-wrap{ width:150px; height:160px; position:relative; }
.mz-pet-wrap svg{ width:100%; height:100%; overflow:visible; display:block; }
.mz-pet-wrap[hidden], .mz-huevo[hidden]{ display:none; }
.mz-vos .cuerpo-pet{ animation:mzRespiraPet 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 100%; }
@keyframes mzRespiraPet{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(1.025,.975); } }
.mz-vos .ojos{ animation:mzParpadeo 4.6s infinite; transform-box:fill-box; transform-origin:50% 50%; }
@keyframes mzParpadeo{ 0%,94%,100%{ transform:scaleY(1); } 97%{ transform:scaleY(.1); } }
.mz-vos .acc{ opacity:0; transform-box:fill-box; transform-origin:50% 100%; transform:scale(.6) translateY(-14px); transition:opacity .35s ease, transform .55s cubic-bezier(.23,1,.32,1); }
.mz-vos.con-gorro .acc-gorro, .mz-vos.con-lentes .acc-lentes, .mz-vos.con-capa .acc-capa{ opacity:1; transform:none; }
.mz-hud{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mz-hud[hidden]{ display:none; }
.mz-hp span{ font:600 12px Inter, sans-serif; letter-spacing:.1em; text-transform:uppercase; color:hsl(var(--muted)); }
.mz-hp i{ display:block; margin-top:6px; height:10px; border-radius:9999px; background:rgba(255,255,255,.08); overflow:hidden; }
.mz-hp b{ display:block; height:100%; width:100%; transform-origin:left; border-radius:inherit; background:linear-gradient(90deg, #6fe08f, #e8bf5b); transition:transform .5s cubic-bezier(.23,1,.32,1); }
.mz-hp-el b{ background:linear-gradient(90deg, #ff8a65, #e2493c); }
.mz-hp[data-hp="0"] b, .mz-hp[data-hp="1"] b{ opacity:.5; }
.mz-dmg{ position:absolute; top:34%; left:50%; font:800 34px/1 'Montserrat', sans-serif; color:#ff6b6b; text-shadow:0 0 14px rgba(255,107,107,.7); opacity:0; pointer-events:none; translate:-50% 0; }
.mz-dmg.der{ left:66%; } .mz-dmg.izq{ left:34%; }
.mz-dmg:not(:empty){ animation:mzDmg .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes mzDmg{ from{ opacity:1; transform:translateY(20px) scale(.6); } 30%{ opacity:1; transform:translateY(-14px) scale(1.2); } to{ opacity:0; transform:translateY(-52px) scale(1); } }
.mz-trade-msg.gana{ color:#6fe08f; animation:mzItem .5s cubic-bezier(.23,1,.32,1) both; }

/* ---------- misterios ---------- */
.mz-mini-desc{ color:hsl(var(--muted)); font-size:14px; line-height:1.5; max-width:360px; }
.mz-chat-mist{ min-height:300px; }
.mz-msg-cuerpo{ flex:1; min-width:0; }
.mz-ping{ display:inline-block; margin:4px 0; padding:1px 5px; border-radius:4px; background:rgba(88,101,242,.3); color:#c9d2ff; font-size:14px; font-weight:500; }
.mz-embed{ position:relative; display:flex; margin-top:6px; border-radius:6px; background:#232428; overflow:hidden; }
.mz-embed-in{ flex:1; padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.mz-embed-t{ color:#fff; font-size:16px; font-weight:700; }
.mz-embed-d{ color:#dbdee1; font-size:15px; line-height:1.45; }
.mz-embed-mist .mz-embed-bar{ background:#e2493c; }
.mz-embed-pie{ color:#9aa0a8; font-size:12px; }
.mz-reloj-barra{ height:5px; border-radius:5px; background:rgba(255,255,255,.1); overflow:hidden; }
.mz-reloj-barra i{ display:block; height:100%; width:100%; transform-origin:left; background:linear-gradient(90deg, #6fe08f, #e8bf5b 60%, #e2493c); border-radius:inherit; }
.mz-opciones{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.mz-opc{ display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer; padding:10px 16px; border-radius:6px; background:#4e5058; color:#fff; font:500 14px Inter, sans-serif;
  transition:transform .16s cubic-bezier(.23,1,.32,1), background-color .2s ease; }
.mz-opc b{ font:700 12px 'JetBrains Mono', monospace; opacity:.8; }
.mz-opc:active:not(:disabled){ transform:scale(.96); }
@media (hover:hover) and (pointer:fine){ .mz-opc:hover:not(:disabled){ background:#6d6f78; } }
.mz-opc:disabled{ cursor:default; opacity:.75; }
.mz-opc.bien{ background:#248046; opacity:1; animation:mzBien .6s cubic-bezier(.23,1,.32,1); }
.mz-opc.mal{ background:#a12d2f; opacity:1; animation:mzMal .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes mzBien{ 0%{ transform:scale(1); } 40%{ transform:scale(1.1); } 100%{ transform:scale(1); } }
@keyframes mzMal{ 10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(4px); } 30%,50%,70%{ transform:translateX(-6px); } 40%,60%{ transform:translateX(6px); } }
.mz-ok-mal svg{ display:none; }
.mz-ok.mz-ok-mal{ background:#232428; }

/* ---------- montaña rusa ---------- */
.mz-rusa{ display:flex; flex-direction:column; gap:14px; }
.mz-rusa-top{ display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.mz-prompt{ font:700 clamp(18px,2.6vw,26px)/1 'JetBrains Mono', monospace; color:hsl(var(--gold-2)); }
.mz-pista-wrap{ border-radius:20px; background:rgba(255,255,255,.04); padding:10px 8px 0; overflow:hidden; }
.mz-pista{ width:100%; height:auto; display:block; overflow:visible; }

.mz-eventos{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.mz-eventos li{ display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:'i b e' 'i n e'; gap:0 12px; align-items:center; padding:10px 14px; border-radius:16px; background:rgba(255,255,255,.04);
  transition:background-color .4s ease, transform .5s cubic-bezier(.23,1,.32,1), box-shadow .4s ease; }
.mz-ev-ic{ grid-area:i; position:relative; width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); color:hsl(var(--muted)); transition:color .4s ease, background-color .4s ease; }
.mz-eventos .mz-ic{ width:20px; height:20px; }
.mz-eventos b{ grid-area:b; font:700 14px Inter, sans-serif; }
.mz-ev-nom{ grid-area:n; font-size:12.5px; color:hsl(var(--muted)); }
.mz-eventos em{ grid-area:e; font:700 15px 'JetBrains Mono', monospace; font-style:normal; color:hsl(var(--muted)); opacity:.4; transition:color .4s ease, opacity .4s ease, transform .6s cubic-bezier(.23,1,.32,1); }
.mz-eventos li.activo{ background:hsl(var(--gold-2)/.12); transform:translateY(-2px); box-shadow:0 10px 30px hsl(var(--gold-2)/.14), inset 0 1px 0 rgba(255,255,255,.08); }
.mz-eventos li.activo .mz-ev-ic{ color:hsl(var(--gold-2)); background:hsl(var(--gold-2)/.16); }
.mz-eventos li.activo em{ color:#6fe08f; opacity:1; transform:scale(1.15); }
.mz-reloj{ font:700 22px 'JetBrains Mono', monospace; color:#fff; }
@media (max-width:640px){ .mz-eventos{ grid-template-columns:1fr; } }

/* ---------- sanciones ---------- */
.mz-san{ display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:18px; }
.mz-san-izq{ display:flex; flex-direction:column; gap:14px; align-items:stretch; }
.mz-usuario{ display:flex; gap:14px; align-items:center; padding:14px; border-radius:18px; background:rgba(255,255,255,.05); position:relative; transition:background-color .5s ease, box-shadow .5s ease; }
.mz-usuario.silenciado{ background:hsl(8 72% 58%/.14); box-shadow:0 0 0 1.5px hsl(8 72% 58%/.4) inset; }
.mz-usuario .mz-av{ width:48px; height:48px; font-size:20px; }
.mz-usuario-txt{ display:flex; flex-direction:column; gap:3px; }
.mz-usuario-txt b{ font:700 16px Inter, sans-serif; }
.mz-estado-u{ font-size:13px; color:hsl(var(--muted)); font-weight:600; }
.mz-estado-u.sil{ color:#ff8a80; }
.mz-warns{ display:flex; gap:10px; }
.mz-warns i{ flex:1; height:12px; border-radius:9999px; background:rgba(255,255,255,.1); transition:background-color .4s ease, transform .5s cubic-bezier(.23,1,.32,1), box-shadow .4s ease; }
.mz-warns i.on{ background:#f1c24b; transform:scaleY(1.35); box-shadow:0 0 14px #f1c24b99; }
.mz-warns i.on.max{ background:#e2493c; box-shadow:0 0 18px #e2493ccc; }
.mz-regla{ color:hsl(var(--muted)); font-size:13.5px; line-height:1.5; }
.mz-regla b{ color:#fff; }
.mz-san-izq .mz-btn{ justify-content:flex-start; font-size:13.5px; }
.mz-san-izq .mz-btn span{ font-family:'JetBrains Mono', monospace; }
.mz-san-izq #mzSanReset span{ font-family:inherit; }
.mz-san-der{ border-radius:20px; background:rgba(255,255,255,.04); padding:16px; min-height:250px; }
.mz-san-t{ font:600 12px/1 Inter, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--muted)); margin-bottom:12px; }
.mz-casos{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.mz-caso{ display:grid; grid-template-columns:auto auto 1fr auto; gap:10px; align-items:center; padding:11px 13px; border-radius:14px; background:rgba(255,255,255,.05); font-size:13.5px; animation:mzCaso .55s cubic-bezier(.23,1,.32,1) both; }
@keyframes mzCaso{ from{ opacity:0; transform:translateY(-14px) scale(.97); } to{ opacity:1; transform:none; } }
.mz-caso b{ font:600 12px 'JetBrains Mono', monospace; color:hsl(var(--muted)); }
.mz-caso-tipo{ font-weight:700; font-size:12px; padding:3px 9px; border-radius:9999px; white-space:nowrap; }
.mz-caso.adv .mz-caso-tipo{ background:#f1c24b26; color:#f1c24b; }
.mz-caso.sil .mz-caso-tipo{ background:#e2493c26; color:#ff8a80; }
.mz-caso-motivo{ color:hsl(var(--text)/.88); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mz-caso time{ font-size:12px; color:hsl(var(--muted)); }
.mz-caso-vacio{ color:hsl(var(--muted)); font-size:14px; padding:24px 0; text-align:center; }
@media (max-width:760px){ .mz-san{ grid-template-columns:1fr; } .mz-caso{ grid-template-columns:auto 1fr auto; } .mz-caso-motivo{ grid-column:1 / -1; order:5; } }

/* coche de la montaña rusa: lo mueve manza-landing.js (energía: lento arriba, rápido abajo) */
.mz-rueda circle{ fill:#1d1d24; stroke:#e8bf5b; stroke-width:2; }
.mz-rueda path{ stroke:#e8bf5b; stroke-width:1.4; stroke-linecap:round; opacity:.8; }
.mz-rueda{ opacity:0; }
.mz-vagon{ filter:drop-shadow(0 6px 6px rgba(0,0,0,.45)); }


/* ================= "Antes de agregarlo": comparativa honesta + dudas de owners (2026-10-08) ================= */
.mz-antes{ padding:56px 24px 24px; }
.mz-antes-head{ margin-bottom:26px; max-width:560px; }
.mz-antes-head h3{ font-weight:800; font-size:clamp(24px,3.2vw,38px); letter-spacing:-.8px; line-height:1.1; text-wrap:balance; margin-top:2px; }
.mz-antes-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:18px; align-items:start; }
.mz-comp{ border-radius:30px 30px 30px 10px; padding:10px 10px 16px; background:rgba(20,20,28,.40); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(26px) saturate(185%); backdrop-filter:blur(26px) saturate(185%); }
.mz-comp table{ width:100%; border-collapse:separate; border-spacing:0 6px; }
.mz-comp th, .mz-comp td{ text-align:left; vertical-align:top; padding:14px 16px; font-size:14px; line-height:1.5; font-weight:400; }
.mz-comp thead th{ font:600 12px/1 Inter, system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:hsl(var(--muted)); padding-top:10px; padding-bottom:6px; }
.mz-comp thead th.mz-comp-nos{ color:hsl(var(--gold-2)); }
.mz-comp tbody th{ font-weight:700; color:#fff; width:22%; border-radius:16px 0 0 16px; background:rgba(255,255,255,.045); }
.mz-comp tbody td{ color:hsl(var(--muted)); background:rgba(255,255,255,.045); }
.mz-comp tbody td.mz-comp-nos{ color:hsl(var(--text)); background:linear-gradient(120deg, hsl(var(--gold-2)/.16), hsl(var(--apple-2)/.08)); border-radius:0 16px 16px 0; display:table-cell; }
.mz-comp tbody td.mz-comp-nos > *{ vertical-align:top; }
.mz-ok-ic{ width:16px; height:16px; margin:3px 8px 0 0; float:left; fill:none; stroke:#6fe08f; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.mz-comp td.mz-comp-nos span{ display:block; overflow:hidden; }
.mz-nota{ margin:10px 16px 0; font-size:12.5px; color:hsl(var(--muted)); }
.mz-dudas{ display:flex; flex-direction:column; gap:8px; }
.mz-duda{ border-radius:22px; background:rgba(20,20,28,.40); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter:blur(26px) saturate(185%); backdrop-filter:blur(26px) saturate(185%); overflow:hidden; transition:background-color .3s ease; }
.mz-duda:nth-child(2){ border-radius:22px 22px 22px 8px; }
.mz-duda:nth-child(3){ border-radius:8px 22px 22px 22px; }
.mz-duda summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 20px; font:700 15px/1.35 'Montserrat', sans-serif; }
.mz-duda summary::-webkit-details-marker{ display:none; }
.mz-duda summary svg{ width:18px; height:18px; flex-shrink:0; fill:none; stroke:hsl(var(--gold-2)); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s cubic-bezier(.23,1,.32,1); }
.mz-duda[open] summary svg{ transform:rotate(180deg); }
.mz-duda[open]{ background:rgba(34,30,40,.52); }
.mz-duda p{ padding:0 20px 18px; color:hsl(var(--muted)); font-size:14px; line-height:1.65; }
.mz-duda[open] p{ animation:mzDudaAbre .5s cubic-bezier(.23,1,.32,1) both; }
@keyframes mzDudaAbre{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.mz-duda summary:active{ transform:scale(.99); }
@media (hover:hover) and (pointer:fine){ .mz-duda:not([open]):hover{ background:rgba(34,30,40,.5); } }
@media (max-width:900px){ .mz-antes-grid{ grid-template-columns:1fr; } .mz-comp tbody th{ width:auto; } }
@media (max-width:640px){
  .mz-comp thead{ display:none; }
  .mz-comp table, .mz-comp tbody, .mz-comp tr, .mz-comp th, .mz-comp td{ display:block; width:auto; }
  .mz-comp tr{ margin-bottom:10px; border-radius:18px; overflow:hidden; }
  .mz-comp tbody th, .mz-comp tbody td, .mz-comp tbody td.mz-comp-nos{ border-radius:0; }
}

/* ================= título del hero con imán (2026-10-08) ================= */
.hero h1 .mzl{ display:inline-block; }
.hero h1 .mzl2{ background:linear-gradient(100deg, hsl(var(--gold-2)) 0%, hsl(var(--text)) 45%, hsl(var(--apple-2)) 100%); background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }