/* Manza's Bot — landing: "Tu tarjeta de rango, a tu manera" (2026-10-10).
   Editor de prueba SIN iniciar sesión: la imagen es el dibujo real del bot (/api/landing/tarjeta), no una imitación.
   Usa los tokens de manzasbot-premium.html. Sin bordes blancos (decisión del dueño): separan el fondo, el desenfoque y
   las sombras. Movimiento solo con transform/opacity; todo respeta prefers-reduced-motion. */

.mzt{ padding:96px 24px 40px; --mzt-1:#F5A623; --mzt-2:#8BC34A; }
.mzt-head{ max-width:640px; margin:0 0 40px; }
.mzt-head h2{ font-weight:800; font-size:clamp(30px,4.4vw,52px); line-height:1.04; letter-spacing:-1.4px; text-wrap:balance; }
.mzt-head p{ color:hsl(var(--muted)); font-size:17px; line-height:1.6; margin-top:16px; max-width:540px; }

/* la tarjeta es muy apaisada: va arriba, a lo ancho y bien grande; los controles, en una franja debajo */
.mzt-body{ display:flex; flex-direction:column; gap:20px; }

/* ---------- escena: la tarjeta flotando sobre una luz del color que elegiste ---------- */
.mzt-escena{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  padding:clamp(34px, 6vw, 76px) clamp(18px, 5vw, 64px) clamp(24px, 3.4vw, 40px); border-radius:32px; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, hsl(230 18% 9% / .82), hsl(230 22% 5% / .9));
  box-shadow:0 30px 80px hsl(0 0% 0% / .45), inset 0 1px 0 hsl(0 0% 100% / .05);
  perspective:1100px;
}
.mzt-luz{
  position:absolute; inset:-30% -10% -20%; z-index:-1; pointer-events:none; opacity:.55; filter:blur(70px);
  background:
    radial-gradient(42% 46% at 28% 48%, var(--mzt-1), transparent 70%),
    radial-gradient(40% 48% at 74% 56%, var(--mzt-2), transparent 70%);
  transition:opacity .5s ease;
}
.mzt-escena::after{  /* grano fino: evita que la luz se vea "de plástico" */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mzt-tarjeta{
  position:relative; width:100%; max-width:1040px; aspect-ratio:2000 / 560; border-radius:clamp(8px, 1.6vw, 20px);
  transform:rotateX(var(--mzt-rx, 0deg)) rotateY(var(--mzt-ry, 0deg)); will-change:transform;
  background:hsl(230 14% 12%);  /* hueco mientras llega la primera imagen */
  transition:transform .5s cubic-bezier(.23,1,.32,1);
  box-shadow:0 26px 60px hsl(0 0% 0% / .55), 0 4px 14px hsl(0 0% 0% / .4);
}
.mzt-tarjeta.mzt-siguiendo{ transition:transform .08s linear; }
.mzt-tarjeta img{
  position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:inherit; opacity:0;
  transition:opacity .32s ease; user-select:none; -webkit-user-drag:none;
}
.mzt-tarjeta img.mzt-on{ opacity:1; }
.mzt-tarjeta::after{  /* brillo que acompaña la inclinación */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:var(--mzt-brillo, 0);
  background:radial-gradient(60% 120% at var(--mzt-bx, 50%) 0%, hsl(0 0% 100% / .2), transparent 62%);
  transition:opacity .4s ease;
}
.mzt-escena.mzt-cargando .mzt-tarjeta img.mzt-on{ opacity:.72; }
/* ---------- subir de nivel en vivo (2026-10-10): la barra y el aro se llenan descubriendo la tarjeta real ---------- */
@property --mzt-aro{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.mzt-tarjeta img.mzt-capa{ transition:none; opacity:0; will-change:opacity, clip-path, filter; }
/* la barra que crece: el recorte de la barra real, estirado a lo ancho desde su comienzo */
.mzt-barra{ position:absolute; overflow:hidden; opacity:0; pointer-events:none; clip-path:inset(0 100% 0 0 round 999px); will-change:clip-path; }
.mzt-barra i{ position:absolute; inset:0; display:block; transform-origin:0 50%; transform:scaleX(0); will-change:transform; }
.mzt-tarjeta .mzt-barra img{ position:absolute; inset:auto; max-width:none; opacity:1; border-radius:0; transition:none; }
/* el aro se RELLENA: abanico que crece desde arriba, en el sentido del reloj, con centro en el avatar (igual que lo dibuja el bot) */
.mzt-tarjeta img.mzt-aro{
  -webkit-mask-image:conic-gradient(from 0deg at 13.1% 50%, #000 var(--mzt-aro), transparent 0);
  mask-image:conic-gradient(from 0deg at 13.1% 50%, #000 var(--mzt-aro), transparent 0);
}
.mzt-escena.mzt-festejo .mzt-luz{ opacity:.9; }
.mzt-luz{ transition:opacity 1.1s cubic-bezier(.32,.72,0,1); }
.mzt-probar{ min-height:48px; padding:0 24px; }
.mzt-probar .mz-ic{ width:18px; height:18px; }
.mzt-probar:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:4px; }
/* el aviso baja como una notificación del teléfono: vidrio esmerilado, ícono, dos renglones */
.mzt-notif{
  position:absolute; top:clamp(10px, 1.8vw, 18px); left:50%; z-index:3; display:flex; align-items:center; gap:12px; text-align:left;
  width:min(380px, calc(100% - 24px)); padding:11px 16px 11px 11px; border-radius:22px; pointer-events:none;
  background:hsl(240 9% 16% / .74); -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
  box-shadow:0 14px 40px hsl(0 0% 0% / .45), inset 0 .5px 0 hsl(0 0% 100% / .14);
  transform:translate(-50%, -160%) scale(.9); opacity:0; will-change:transform, opacity;
}
.mzt-notif img{ width:40px; height:40px; border-radius:10px; flex:none; background:hsl(240 12% 12%); }
.mzt-notif div{ flex:1; min-width:0; line-height:1.25; }
.mzt-notif b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.2px; color:hsl(var(--text)); }
.mzt-notif span{ display:block; font-size:14px; color:hsl(240 20% 94% / .64); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mzt-notif time{ align-self:flex-start; font-size:12.5px; color:hsl(240 20% 94% / .5); padding-top:1px; }
/* mientras corre la demostración, los controles esperan (si no, cambiar un color a mitad de camino la rompería) */
.mzt.mzt-ocupado .mzt-controles{ pointer-events:none; opacity:.55; transition:opacity .3s ease; }
.mzt-controles{ transition:opacity .3s ease; }
.mzt-nota{ margin:0; text-align:center; font-size:13px; color:hsl(var(--muted)); }
.mzt-nota b{ color:hsl(var(--text)); font-weight:600; }

/* ---------- controles ---------- */
.mzt-controles{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr) minmax(0,1.25fr) minmax(0,1fr); gap:26px 30px; align-items:start;
  padding:28px 30px; border-radius:32px;
  background:hsl(230 16% 10% / .6); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 20px 60px hsl(0 0% 0% / .35), inset 0 1px 0 hsl(0 0% 100% / .05);
}
.mzt-grupo > b{ display:block; font:700 12px/1 Inter, system-ui, sans-serif; letter-spacing:.9px; text-transform:uppercase; color:hsl(var(--muted)); margin-bottom:12px; }

.mzt-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.mzt-chip{
  position:relative; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
  box-shadow:0 4px 14px hsl(0 0% 0% / .4), inset 0 0 0 2px hsl(0 0% 0% / .18);
  transition:transform .18s cubic-bezier(.23,1,.32,1), box-shadow .2s ease;
}
.mzt-chip:active{ transform:scale(.92); }
.mzt-chip[aria-pressed="true"]{ box-shadow:0 0 0 3px hsl(230 16% 10%), 0 0 0 5px hsl(var(--gold-2)), 0 6px 18px hsl(0 0% 0% / .45); }

.mzt-colores{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.mzt-color{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; font-weight:600; color:hsl(var(--muted)); text-align:center; cursor:pointer; }
.mzt-color input{
  -webkit-appearance:none; appearance:none; width:100%; max-width:64px; height:44px; padding:0; border:0; border-radius:14px; background:none; cursor:pointer;
  box-shadow:0 4px 14px hsl(0 0% 0% / .4); transition:transform .18s cubic-bezier(.23,1,.32,1);
}
.mzt-color input:active{ transform:scale(.95); }
.mzt-color input::-webkit-color-swatch-wrapper{ padding:0; }
.mzt-color input::-webkit-color-swatch{ border:0; border-radius:14px; }
.mzt-color input::-moz-color-swatch{ border:0; border-radius:14px; }

.mzt-fondos{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.mzt-fondo{
  position:relative; height:56px; min-width:0; padding:0; border:0; border-radius:14px; cursor:pointer; overflow:hidden;
  background:hsl(230 14% 14%) center / cover no-repeat; color:hsl(var(--text));
  font:700 11px/1.1 Inter, system-ui, sans-serif; display:flex; align-items:flex-end; justify-content:center;
  box-shadow:0 4px 14px hsl(0 0% 0% / .4); transition:transform .18s cubic-bezier(.23,1,.32,1), box-shadow .2s ease;
}
.mzt-fondo span{ position:relative; width:100%; padding:14px 4px 7px; background:linear-gradient(transparent, hsl(0 0% 0% / .72)); }
.mzt-fondo[data-fondo=""]{ background-image:linear-gradient(135deg, hsl(230 16% 16%), hsl(230 20% 8%)); }
.mzt-lista .mzt-fondo[data-fondo="amanecer"]{ background-image:url("inicio/fondo-mini-amanecer.webp"); }
.mzt-lista .mzt-fondo[data-fondo="dia"]{ background-image:url("inicio/fondo-mini-dia.webp"); }
.mzt-lista .mzt-fondo[data-fondo="noche"]{ background-image:url("inicio/fondo-mini-noche.webp"); }
.mzt-fondo:active{ transform:scale(.95); }
.mzt-fondo[aria-pressed="true"]{ box-shadow:0 0 0 3px hsl(230 16% 10%), 0 0 0 5px hsl(var(--gold-2)), 0 6px 18px hsl(0 0% 0% / .45); }

.mzt-nombre{
  width:100%; min-height:48px; padding:0 16px; border:0; border-radius:14px; color:hsl(var(--text));
  background:hsl(0 0% 100% / .06); font:600 16px/1 Inter, system-ui, sans-serif;  /* 16px: iOS no hace zoom al enfocar */
  transition:background-color .2s ease, box-shadow .2s ease;
}
.mzt-nombre::placeholder{ color:hsl(var(--muted)); font-weight:500; }
.mzt-nombre:focus{ outline:none; background:hsl(0 0% 100% / .09); box-shadow:0 0 0 2px hsl(var(--gold-2) / .7); }

.mzt-chip:focus-visible, .mzt-fondo:focus-visible, .mzt-color input:focus-visible, .mzt-cta .mz-btn:focus-visible{
  outline:2px solid hsl(var(--gold-2)); outline-offset:4px;
}

.mzt-cta{ grid-column:1 / -1; display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-top:4px; }
.mzt-cta .mz-btn{ min-height:52px; padding:0 34px; font-size:16px; text-decoration:none; }
.mzt-cta small{ flex:1; min-width:220px; color:hsl(var(--muted)); font-size:13.5px; line-height:1.5; }

@media (hover:hover) and (pointer:fine){
  .mzt-chip:hover, .mzt-fondo:hover{ transform:scale(1.06); }
  .mzt-color input:hover{ transform:scale(1.05); }
}

@media (max-width:980px){
  .mzt-escena{ border-radius:26px; }
  .mzt-controles{ grid-template-columns:repeat(2, minmax(0,1fr)); padding:24px 20px; border-radius:26px; }
}
@media (max-width:560px){
  .mzt{ padding:72px 16px 28px; }
  .mzt-escena{ padding:26px 12px 18px; }
  .mzt-controles{ grid-template-columns:1fr; gap:22px; padding:22px 16px; }
  .mzt-cta .mz-btn{ width:100%; }
  .mzt-cta small{ text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  .mzt-tarjeta{ transform:none !important; transition:none; }
  .mzt-tarjeta img, .mzt-luz, .mzt-chip, .mzt-fondo, .mzt-color input{ transition:none; }
  .mzt-tarjeta::after{ display:none; }
}