/* MONEDAZO — Tu plata. En orden. */
:root{
  --green:#123b35; --green-2:#0d2b26; --green-3:#1d524b;
  --cream:#fffdf4; --cream-2:#f7f1de;
  --gold:#e7c97f; --gold-2:#d4af5e;
  --ink:#22332f; --muted:#7a8a85;
  --red:#d9534f; --amber:#e8a13c; --ok:#3d9e6d;
  --card:#ffffff; --radius:16px;
  --nav-h:68px; --moni-h:96px;
  --shadow:0 6px 24px rgba(18,59,53,.12);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--cream); color:var(--ink);
  padding-bottom:calc(var(--nav-h) + var(--moni-h) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
.hidden{display:none!important}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit; font-size:16px}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;background:var(--green);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:200}
.boot-logo{font-size:56px;font-weight:900;letter-spacing:3px;line-height:1.1;text-align:center}
.boot-logo .zo{color:#e7c97f}
@media (max-width:380px){.boot-logo{font-size:44px}}
.boot .loading-moni{margin-top:10px}
.boot .hourglass{margin-top:2px}
.boot-tag{color:var(--gold);font-size:16px}
.boot-spin{width:34px;height:34px;border:4px solid rgba(231,201,127,.3);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite;margin-top:14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- auth / onboarding ---------- */
body.auth-mode{padding-bottom:24px}
.auth{min-height:100vh;position:relative;overflow-x:clip;background:linear-gradient(165deg,#0d2b26 0%,#123b35 48%,#1d524b 100%);padding:0 0 42px}
.auth-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.auth-bg span{position:absolute;border-radius:50%}
.auth-bg .c1{width:360px;height:360px;top:-110px;right:-110px;background:radial-gradient(circle,rgba(231,201,127,.20),transparent 70%)}
.auth-bg .c2{width:280px;height:280px;top:38%;left:-130px;background:radial-gradient(circle,rgba(61,158,109,.28),transparent 70%)}
.auth-bg .c3{width:420px;height:420px;bottom:-160px;right:-140px;background:radial-gradient(circle,rgba(231,201,127,.12),transparent 70%)}
.auth-hero{text-align:center;padding:104px 20px 0;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
/* Punto 8: en modo login el hero se compacta para que no quede hueco verde */
#auth-screen.auth-login .auth-hero{padding-top:48px}
#auth-screen.auth-login .auth-tagline{margin-top:6px}
/* La burbuja "Hola, soy Moni" no se muestra en login: el margin-bottom grande del
   brand-stage (reserva de espacio para la burbuja) se reduce para pegar el eslogan al título */
#auth-screen.auth-login .brand-stage{margin-bottom:10px}
.auth-brand{font-size:44px;font-weight:900;letter-spacing:3px;color:#fffdf4;text-shadow:0 3px 14px rgba(0,0,0,.3)}
.auth-brand .zo{color:#e7c97f}
/* Moni integrado al wordmark: a la IZQUIERDA de la M, entra con pop */
.brand-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.auth-brand{position:relative;z-index:2}
.logo-moni-wrap{position:relative;width:68px;flex:0 0 auto}
.logo-moni-left{width:100%;display:block;transform:scale(0);opacity:0;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.logo-moni-left svg{width:100%;height:auto;display:block;animation:moniSway 5.2s ease-in-out infinite;transform-origin:50% 88%}
.logo-moni-left.intro-play{animation:moniPop .9s cubic-bezier(.34,1.45,.64,1) forwards}
@keyframes moniPop{
  0%{transform:scale(0);opacity:0}
  55%{opacity:1}
  100%{transform:scale(1);opacity:1}
}
@media (max-width:360px){
  .logo-moni-wrap{width:56px}
  .auth-brand{font-size:38px}
}
#logo-moni .pupil{transform-box:fill-box;transform-origin:center;animation:moniBlink 4.8s infinite}
#logo-moni .moni-wave{transform-origin:158px 98px;animation:moniWave 1.15s ease-in-out infinite}
/* burbuja alargada (pastilla horizontal): sale del lado de Moni DESPUÉS del pop,
   queda 10 segundos y se desvanece (Moni queda) */
.logo-bubble{display:block;margin:14px auto 0;background:#fffdf4;color:#123b35;font-weight:800;font-size:14px;padding:10px 22px;border-radius:999px;white-space:nowrap;width:max-content;max-width:80vw;box-shadow:0 10px 24px rgba(0,0,0,.3);z-index:5;animation:bubIn .35s ease;transition:opacity .7s ease;text-align:center}
.logo-bubble.hidden{display:none}
.logo-bubble:after{content:"";position:absolute;left:-6px;top:50%;width:14px;height:14px;background:#fffdf4;transform:translateY(-50%) rotate(45deg);border-radius:3px}
.logo-bubble-out{opacity:0}
/* En móvil no hay espacio al lado: la burbuja va DEBAJO de Moni con la cola hacia arriba.
   Nunca tapa el logo ni el eslogan. */
@media (max-width:480px){
  .logo-bubble{left:0;top:calc(100% + 10px);transform:none;font-size:13px;padding:8px 18px;max-width:70vw}
  .logo-bubble:after{left:26px;top:-5px;transform:rotate(45deg)}
}
@keyframes bubIn{from{transform:translateX(-50%) scale(.75);opacity:0}}
@keyframes moniSway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
@keyframes moniBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}98%{transform:scaleY(1)}}
@keyframes moniWave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-26deg)}}
.auth-moni{width:100%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.auth-moni svg{width:100%;height:auto;display:block;animation:moniSway 5.2s ease-in-out infinite;transform-origin:50% 88%}
.auth-tagline{color:#e7c97f;font-size:16px;font-weight:600;margin-top:10px;letter-spacing:.3px;text-align:center;width:100%}
/* buddy superior: escala por detrás del recuadro crema y se sienta en el borde.
   El card (z-index:1) tapa las piernas permanentemente: solo manos + moneda a la vista. */
.buddy-stage{position:relative;z-index:0;width:calc(100% - 32px);max-width:440px;height:94px;margin:36px auto -18px;pointer-events:none}
/* En móvil: más espacio arriba para que la burbuja HI no se monte sobre el recuadro 3 */
@media (max-width:480px){
  .buddy-stage{margin-top:64px}
}
.auth-moni-buddy{position:absolute;left:calc(50% - 95px);bottom:0;width:88px}
.auth-moni-buddy.climb{animation:buddyClimb 1.4s cubic-bezier(.34,1.2,.5,1) forwards}
@keyframes buddyClimb{
  0%{transform:translateY(95px) scale(.96)}
  55%{transform:translateY(-16px) scale(1.04,.94)}
  75%{transform:translateY(3px) scale(.98,1.02)}
  100%{transform:translateY(0) scale(1)}
}
#auth-moni-2 svg{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28));animation:moniSway2 6.4s ease-in-out infinite;transform-origin:50% 88%}
@keyframes moniSway2{0%,100%{transform:rotate(2.4deg)}50%{transform:rotate(-2.4deg)}}
#auth-moni-2 .pupil{transform-box:fill-box;transform-origin:center;animation:moniBlink 4.8s infinite}
#auth-moni-2 .pupil-g{transform-box:fill-box}
/* burbuja del buddy: píldora ALARGADA sobre Moni, texto corrido en una línea,
   fade-in al aparecer y fade-out al ocultarse (clase .show); nunca tapa el card */
.auth-bubble-buddy{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(-8px);width:max-content;max-width:60vw;background:#fffdf4;color:#123b35;font-weight:800;font-size:12.5px;line-height:1.3;padding:9px 18px;border-radius:999px;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.25);z-index:3;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .35s ease,transform .35s ease,visibility .35s}
.auth-bubble-buddy:after{content:"";position:absolute;left:-5px;top:50%;width:12px;height:12px;background:#fffdf4;transform:translateY(-50%) rotate(45deg);border-radius:3px}
.auth-bubble-buddy.show{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
/* En móvil la burbuja del buddy va AL LADO de Moni (a la derecha), no arriba,
   para no tapar el slogan. Con ancho limitado para que no se salga. */
@media (max-width:480px){
  .auth-bubble-buddy{left:calc(100% + 10px);top:50%;bottom:auto;transform:translateY(-50%) translateX(-8px);white-space:normal;width:max-content;max-width:52vw;border-radius:16px;text-align:left;font-size:12px;padding:8px 14px}
  .auth-bubble-buddy:after{left:-5px;right:auto;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}
  .auth-bubble-buddy.show{transform:translateY(-50%) translateX(0)}
}
/* Cuando el campo de contraseña tiene foco en móvil, el buddy se queda fijo
/* pw-focused: el buddy NO se mueve de su lugar (queda sobre el recuadro crema,
   solo se tapa los ojos). El scroll-lock en JS evita que el teclado empuje la pantalla. */
/* cover-hands: swing from hanging at the sides up over the pupils (visible motion, no instant pop) */
#auth-moni-2 .cover-arm{transform-box:view-box;transition:transform .55s cubic-bezier(.34,1.3,.64,1)}
#auth-moni-2 .cover-left{transform-origin:46px 110px;transform:rotate(115deg)}
#auth-moni-2 .cover-right{transform-origin:154px 110px;transform:rotate(-115deg)}
#auth-moni-2.covering .cover-left,#auth-moni-2.covering .cover-right{transform:rotate(0deg)}
/* how it works — iPhone mockups animados */
.auth-how{padding:28px 18px 4px;position:relative;z-index:1}
.auth-how h3{color:#fffdf4;text-align:center;font-size:19px;margin:0 0 14px;letter-spacing:.4px}
.how-cards{display:grid;gap:12px;max-width:460px;margin:0 auto}
.how-card{background:rgba(255,253,244,.07);border:1px solid rgba(231,201,127,.28);border-radius:18px;padding:16px;color:#fffdf4;backdrop-filter:blur(3px)}
.how-num{width:30px;height:30px;border-radius:50%;background:#e7c97f;color:#123b35;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:10px}
.how-card h4{margin:11px 0 4px;font-size:16px;color:#fffdf4}
.how-card p{margin:0;font-size:13px;color:#cfe0da;line-height:1.55}
/* marco de iPhone en CSS puro */
.iphone{width:150px;margin:8px auto 4px;background:#0d2b26;border-radius:30px;padding:9px;box-shadow:0 14px 28px rgba(0,0,0,.4),inset 0 0 0 2px rgba(231,201,127,.4)}
.ip-screen{background:#fffdf4;border-radius:22px;position:relative;min-height:196px;padding:30px 10px 10px;overflow:hidden}
.ip-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:54px;height:15px;background:#0d2b26;border-radius:99px}
/* mock 1: escena "Moni relajado" construida en HTML/CSS/SVG (no es imagen).
   Teléfono grande con marquee + sofá crema + Moni recostado + teléfono chico
   inclinado + pila de monedas + badge de check + captions. Todo integrado con sombras. */
.hs-scene{position:relative;aspect-ratio:460/430;margin:4px 0 2px;overflow:hidden}
.hs-scene::after{content:"";position:absolute;left:2%;right:2%;bottom:0;height:30px;background:radial-gradient(ellipse at center,rgba(0,0,0,.32),transparent 68%);z-index:1;pointer-events:none}
.hs-scene .iphone{margin:0}
.hs-phone-main{position:absolute;left:11%;top:0;width:39%;z-index:2;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
/* Columna de mensajes estilo WhatsApp (lado derecho): burbuja 1 → burbuja 2 → check.
   Animados en secuencia cuando #auth-how recibe .play (ver A.playMock1 para el timing). */
.hs-msgs{position:absolute;right:2%;top:5%;width:38%;z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.hs-msg{background:linear-gradient(135deg,#2aa76d,#1a6b4a);color:#fffdf4;font-size:14px;font-weight:700;padding:10px 14px;border-radius:4px 14px 14px 14px;box-shadow:0 6px 16px rgba(0,0,0,.32);line-height:1.35;max-width:100%;position:relative;opacity:0;transform:translateX(34px) scale(.9)}
.hs-msg::before{content:"";position:absolute;left:-7px;top:12px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:8px solid #23905f}
#auth-how.play .hs-msg{animation:msgIn .5s cubic-bezier(.34,1.45,.64,1) forwards}
#auth-how.play .hs-msg.m1{animation-delay:3.7s}
#auth-how.play .hs-msg.m2{animation-delay:4.5s}
@keyframes msgIn{to{opacity:1;transform:translateX(0) scale(1)}}
.hs-check2{width:64px;margin-top:2px;opacity:0;transform:scale(.4);filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.hs-check2 svg{width:100%;height:auto;display:block}
#auth-how.play .hs-check2{animation:checkPop .55s cubic-bezier(.34,1.56,.64,1) 5.3s forwards,checkPulse 2.4s ease-in-out 6.1s infinite}
#auth-how.play .hs-check2 path{stroke-dasharray:44;stroke-dashoffset:44;animation:checkDraw .45s ease 5.55s forwards}
@keyframes checkPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
@keyframes checkDraw{to{stroke-dashoffset:0}}
@keyframes checkPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.hs-sofa{position:absolute;left:5%;bottom:13%;width:66%;height:36%;z-index:3;pointer-events:none}
.hs-sofa .back{position:absolute;left:2%;top:0;width:56%;height:82%;background:#f3ecd7;border-radius:44% 46% 26px 26px;box-shadow:inset -8px -6px 0 rgba(0,0,0,.05)}
.hs-sofa .seat{position:absolute;left:0;bottom:0;width:100%;height:56%;background:#faf3e0;border-radius:46px;box-shadow:0 12px 24px rgba(0,0,0,.28)}
.hs-coins{position:absolute;left:1%;bottom:1.5%;width:15%;z-index:4;display:flex;flex-direction:column-reverse;align-items:center;pointer-events:none}
.hs-coins i{display:block;width:80%;aspect-ratio:2.8/1;border-radius:50%;background:linear-gradient(180deg,#f4dc8e,#d4af5e);border:2px solid #a8842f;margin-top:-12%;box-shadow:0 3px 6px rgba(0,0,0,.25)}
.hs-coins i:last-child{margin-top:0}
.hs-moni{position:absolute;left:25%;bottom:19%;width:33%;z-index:4;pointer-events:none;transform:rotate(-8deg);filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.hs-moni svg{width:100%;height:auto;display:block;animation:moniSway 6s ease-in-out infinite;transform-origin:50% 88%}
/* Secuencia de entrada: Moni camina desde fuera de la escena (JS, A.playMock1).
   Antes de .walking está oculto; .walking = entrando/saludando; .landed = en el sofá. */
#how-moni-lounge{opacity:0}
#how-moni-lounge.walking{opacity:1}
#how-moni-lounge.jumping{opacity:1}
#how-moni-lounge.landed{opacity:1}
#how-moni-lounge.walking svg{animation:walkBob .45s ease-in-out infinite}
@keyframes walkBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
/* piernas que se alternan al caminar (mock 1 y mock 2 usan la pose wave) */
#how-moni-lounge.walking .moni-leg,#how-moni-chart.waving .moni-leg{transform-box:fill-box;transform-origin:50% 8%;animation:moniLegSwing .45s ease-in-out infinite}
#how-moni-lounge.walking .moni-leg-r,#how-moni-chart.waving .moni-leg-r{animation-delay:.225s}
@keyframes moniLegSwing{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-22deg)}}
#how-moni-lounge.waving .moni-wave{transform-box:view-box;transform-origin:158px 98px;animation:moniWave .9s ease-in-out infinite}
.hs-phone-small{position:absolute;left:63%;bottom:15%;width:28%;z-index:5;transform:rotate(10deg);filter:drop-shadow(0 12px 18px rgba(0,0,0,.35))}
.hs-phone-small .ip-screen{min-height:0;padding:24px 8px 8px}
.hs-phone-small .ip-row{font-size:9px;padding:6px 2px}
/* Escena 2 "Moni los organiza": Moni entra caminando desde la derecha, señala el
   gráfico con la mano en alto y termina de frente con thumbs up (pose thumb). */
#how-card-2{position:relative;overflow:hidden}
.hs-moni2{position:absolute;right:3%;bottom:34%;width:27%;z-index:5;pointer-events:none;opacity:0;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}
.hs-moni2 svg{width:100%;height:auto;display:block}
#how-moni-chart.waving .moni-wave{transform-box:view-box;transform-origin:158px 98px;animation:moniWave .9s ease-in-out infinite}
#how-moni-chart.done svg{animation:thumbBounce 2.4s ease-in-out infinite}
/* Moni sobre la moto: el brazo saluda solo durante .waving */
#how-moni-rider .moni-wave{transform-box:view-box;transform-origin:158px 98px;animation:moniWave .9s ease-in-out infinite;animation-play-state:paused}
.hs-moto-wrap.waving #how-moni-rider .moni-wave{animation-play-state:running}
@keyframes thumbBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* Escena 3 "Mi moto": carril propio para que la moto NUNCA tape texto.
   La moto (vespa con Moni con casco) sale POR DETRÁS del teléfono y es más grande.
   Moni frena, saluda con la mano SIN bajarse y sigue de largo hasta salir. */
#how-card-3{position:relative;overflow:hidden;padding-top:28px}
.how-moto-row{display:flex;align-items:center;gap:4px;margin:8px 0 12px}
#how-card-3 .iphone{width:150px;flex:0 0 150px;margin:0;position:relative;z-index:2}
.hs-moto-lane{position:relative;flex:1;height:230px;overflow:hidden;margin:0;z-index:1}
.hs-moto-wrap{position:absolute;top:30px;left:0;width:210px;will-change:transform}
.hs-moto-wrap .moto{width:100%;height:auto;display:block}
#how-card-3 h4,#how-card-3 p{position:relative;z-index:2}
.hs-moto-wrap{position:absolute;left:0;top:30px;width:210px;opacity:0;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.hs-moto-wrap svg.moto{width:100%;height:auto;display:block;overflow:visible}
/* Moni real montado sobre la moto: posicionado sobre el asiento */
.hs-moto-rider{position:absolute;left:18%;top:-28%;width:52%;z-index:2;pointer-events:none}
.hs-moto-rider svg{width:100%;height:auto;display:block;overflow:visible}
/* Rebote sutil de Moni mientras la moto avanza */
.hs-moto-wrap.riding .hs-moto-rider{animation:riderBounce .7s ease-in-out infinite}
@keyframes riderBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.moto-wheel{transform-box:fill-box;transform-origin:center;animation:motoSpin .7s linear infinite;animation-play-state:paused}
.hs-moto-wrap.riding .moto-wheel{animation-play-state:running}
/* Humo del escape: fade in suave al arrancar, puffs subiendo en loop */
.moto-smoke{opacity:0;transition:opacity .6s ease}
.hs-moto-wrap.riding .moto-smoke{opacity:.9}
.moto-smoke .smoke-puff{transform-box:fill-box;transform-origin:center;animation:smokeRise 1.8s ease-out infinite;animation-play-state:paused}
.hs-moto-wrap.riding .moto-smoke .smoke-puff{animation-play-state:running}
.moto-smoke .s1{animation-delay:0s}
.moto-smoke .s2{animation-delay:.6s}
.moto-smoke .s3{animation-delay:1.2s}
@keyframes smokeRise{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  25%{opacity:.7}
  100%{transform:translate(-28px,-34px) scale(1.5);opacity:0}
}
@keyframes motoSpin{to{transform:rotate(360deg)}}
/* brazo que saluda: quieto salvo cuando .waving */
.moto-wave-arm{transform-box:fill-box;transform-origin:50% 90%;animation:motoWave .8s ease-in-out infinite;animation-play-state:paused}
.hs-moto-wrap.waving .moto-wave-arm{animation-play-state:running}
@keyframes motoWave{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(16deg)}}
@media (min-width:700px){
  .how-card.scene-card{max-width:560px}
}
/* marquee vertical en loop: las filas suben sin parar, con fade arriba/abajo */
.ip-marquee{height:122px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
#auth-how.play .ip-track{animation:ipMarquee 18s linear infinite}
@keyframes ipMarquee{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.ip-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:8px 4px;border-bottom:1px solid #f0e9d2;color:#22332f;font-weight:600}
.ip-row:last-child{border-bottom:0}
.ip-row b{font-variant-numeric:tabular-nums}
.ip-row .neg{color:#d9534f}.ip-row .pos{color:#3d9e6d}
.ip-bars{display:flex;align-items:flex-end;gap:7px;height:118px;padding:6px 6px 0}
.ip-bars i{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#e7c97f,#d4af5e);height:var(--h);min-height:12px;transform-origin:bottom}
.ip-bars i:nth-child(even){background:linear-gradient(180deg,#3d9e6d,#1d524b)}
.ip-cap{text-align:center;font-size:11px;color:#7a8a85;font-weight:700;margin-top:10px}
.ip-goal{padding:34px 4px 6px}
.ip-goal-head{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:#123b35}
.ip-goal-head b{font-variant-numeric:tabular-nums;color:#1f7a4d}
.ip-goal-bar{height:12px;background:#f0e9d2;border-radius:99px;margin:10px 0 8px;overflow:hidden}
.ip-goal-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3d9e6d,#e7c97f);width:0}
/* animaciones al mostrar (clase .play en #auth-how) */
/* las barras crecen en loop con delay escalonado */
#auth-how.play .ip-bars i{animation:barLoop 2.4s cubic-bezier(.34,1.25,.64,1) both infinite}
#auth-how.play .ip-bars i:nth-child(1){animation-delay:0s}
#auth-how.play .ip-bars i:nth-child(2){animation-delay:.15s}
#auth-how.play .ip-bars i:nth-child(3){animation-delay:.3s}
#auth-how.play .ip-bars i:nth-child(4){animation-delay:.45s}
#auth-how.play .ip-bars i:nth-child(5){animation-delay:.6s}
#auth-how.play .ip-bars i:nth-child(6){animation-delay:.75s}
@keyframes barLoop{0%{transform:scaleY(0)}55%{transform:scaleY(1)}80%{transform:scaleY(1)}100%{transform:scaleY(0)}}
/* la meta se llena en loop 0→65% */
#auth-how.play .ip-goal-bar i{animation:fillLoop 3.4s cubic-bezier(.3,1,.4,1) infinite}
@keyframes fillLoop{0%{width:0}55%{width:var(--w)}82%{width:var(--w)}100%{width:0}}
/* form card */
.auth-card{background:var(--cream);border-radius:22px;padding:30px 20px 24px;width:calc(100% - 32px);max-width:440px;margin:30px auto 0;box-shadow:0 24px 60px rgba(0,0,0,.35);border-top:4px solid #e7c97f;position:relative;z-index:1}
#verify-screen.auth-card{margin-top:22px;text-align:center}
.verify-moni{width:110px;margin:0 auto 4px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.verify-moni svg{width:100%;height:auto;display:block;animation:moniSway 5.2s ease-in-out infinite;transform-origin:50% 88%}
#verify-screen h2{color:var(--green);margin:4px 0 8px;font-size:22px}
.verify-text{color:var(--ink);font-size:14px;line-height:1.65;margin:0 0 16px}
#verify-screen .btn-ghost{margin-top:10px}
.auth-global{margin:0 0 12px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.auth-retry{background:var(--gold);color:var(--green-2);border:0;border-radius:999px;padding:8px 18px;font-weight:800;font-size:13px}
.auth-tabs{display:flex;background:var(--cream-2);border-radius:12px;padding:4px;margin-bottom:16px}
.auth-tab{flex:1;border:0;background:transparent;padding:11px;border-radius:9px;font-weight:800;font-size:15px;color:var(--muted)}
.auth-tab.active{background:var(--green);color:#fff;box-shadow:0 3px 10px rgba(18,59,53,.3)}
.auth-form label{display:block;font-size:13px;font-weight:600;color:var(--green);margin-bottom:12px}
.auth-form input[type=email],.auth-form input[type=password],.auth-form input[type=text]{width:100%;padding:12px;border:2px solid #e4ddc6;border-radius:12px;margin-top:5px;background:#fff;background-color:#fff;color:var(--ink);color-scheme:light;-webkit-appearance:none;appearance:none}
.auth-form input:focus{outline:none;border-color:var(--green)}
.auth-form input::placeholder{color:#8a8471;opacity:1}
.auth-form input::-webkit-input-placeholder{color:#8a8471}
.auth-form input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px #fff inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
.auth-form input:autofill{box-shadow:0 0 0 60px #fff inset}
/* Evita que el navegador aplique modo oscuro a los controles del formulario */
:root{color-scheme:light}
.forgot-link{display:block;margin:8px 0 0 auto;padding:2px 4px;font-size:13px}
.tc-row{display:flex!important;align-items:flex-start;gap:8px;font-weight:400!important}
.tc-row input{margin-top:3px;flex-shrink:0;width:18px;height:18px}
.link{background:none;border:0;color:var(--green-3);text-decoration:underline;font-weight:700;padding:0;font-size:13px}
.btn-primary{background:var(--green);color:#fff;border:0;border-radius:12px;padding:13px 18px;font-weight:800;font-size:16px;width:100%}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled,.btn-primary.grey{background:#9aa5a1}
.btn-ghost{background:transparent;border:2px solid var(--green);color:var(--green);border-radius:12px;padding:11px 18px;font-weight:700;width:100%;margin-top:10px}
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:16px 0}
.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:#e4ddc6}
.btn-social{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border:2px solid #e4ddc6;background:#fff;border-radius:12px;font-weight:700;color:var(--ink);margin-bottom:10px}
.btn-social:disabled{opacity:.55}
.btn-social.grey{background:#eef0ee;color:#9aa5a1}
.btn-social em{font-style:normal;font-size:12px;color:var(--muted)}
.btn-disabled{opacity:.6}
.auth-error{color:var(--red);font-size:13px;min-height:18px;margin-top:8px;text-align:center}
.auth-note{text-align:center;color:var(--muted);font-size:12px;margin-top:12px;line-height:1.5}
.auth-foot{text-align:center;margin-top:20px;position:relative;z-index:1}
.auth-foot a{color:#e7c97f;font-size:13px;font-weight:700;text-decoration:none}
.legal-body{text-align:justify;text-justify:inter-word;font-size:13.5px;line-height:1.65;color:var(--ink)}
.legal-body strong{color:var(--green)}

/* ---------- global loading veil: MONI con reloj de arena ---------- */
.loading-veil{position:fixed;inset:0;background:rgba(13,43,38,.78);z-index:180;display:flex;align-items:center;justify-content:center;padding:18px}
.loading-box{display:flex;flex-direction:column;align-items:center;gap:14px}
.loading-moni{position:relative;width:128px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.4))}
.loading-moni svg{width:100%;height:auto;display:block;animation:moniSway 5.2s ease-in-out infinite;transform-origin:50% 88%}
.loading-moni .pupil{transform-box:fill-box;transform-origin:center;animation:moniBlink 4.8s infinite}
/* la moneda de MONI se llena de verde mientras carga */
.coin-fill{position:absolute;left:50%;top:23.4%;width:56.6%;aspect-ratio:1/1;transform:translateX(-50%);border-radius:50%;overflow:hidden;pointer-events:none}
.coin-fill i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,rgba(61,158,109,.75),rgba(29,82,75,.85));animation:coinFill 1.8s ease-in-out infinite}
@keyframes coinFill{0%{height:0}70%{height:100%}100%{height:100%}}
/* reloj de arena animado */
.hourglass{width:44px;height:64px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.hourglass .sand-top{transform-box:fill-box;transform-origin:top;animation:sandTop 2.4s ease-in-out infinite}
.hourglass .sand-stream{animation:sandStream 2.4s ease-in-out infinite}
.hourglass .sand-bottom{transform-box:fill-box;transform-origin:bottom;animation:sandBottom 2.4s ease-in-out infinite}
@keyframes sandTop{0%{transform:scaleY(1);opacity:1}80%,100%{transform:scaleY(.15);opacity:.4}}
@keyframes sandStream{0%,15%{opacity:0}25%,75%{opacity:1}85%,100%{opacity:0}}
@keyframes sandBottom{0%{transform:scaleY(.2);opacity:.5}80%,100%{transform:scaleY(1);opacity:1}}
.loading-label{color:#fffdf4;font-weight:800;font-size:15px;letter-spacing:.3px}

/* ---------- overlay / modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(13,43,38,.72);z-index:120;display:flex;align-items:center;justify-content:center;padding:18px}
.modal{background:var(--cream);border-radius:20px;padding:26px 22px;max-width:440px;width:100%;max-height:88vh;overflow-y:auto;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal h2{color:var(--green);margin:6px 0 10px}
.modal p{line-height:1.55}
.modal .muted{color:var(--muted);font-size:13px}
.modal-moni{width:110px;height:110px;margin:0 auto}
.modal .btn-primary{margin-top:12px}

/* ---------- topbar / nav ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--green);color:#fff;display:flex;align-items:center;gap:10px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}
.brand{font-weight:900;letter-spacing:1.5px;font-size:17px;flex:1}
.brand small{display:block;font-weight:400;font-size:11px;color:var(--gold);letter-spacing:.5px}
.trial-pill{background:var(--gold);color:var(--green-2);font-weight:800;font-size:12px;border-radius:999px;padding:6px 12px;white-space:nowrap}
.icon-btn{background:rgba(255,255,255,.14);border:0;color:#fff;font-size:17px;border-radius:10px;width:38px;height:38px}

.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid #e7e0cb;display:flex;overflow-x:auto;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
.navbtn{flex:1 0 auto;min-width:64px;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:10.5px;font-weight:600;padding:6px 4px}
.navbtn .nav-ico{font-size:21px}
.navbtn.active{color:var(--green)}
.navbtn.active .nav-ico{filter:drop-shadow(0 2px 4px rgba(18,59,53,.3))}

/* ---------- views ---------- */
#views{max-width:640px;margin:0 auto;padding:16px 14px 30px}
.view h1{font-size:22px;color:var(--green);margin:4px 0 12px}
.view h2{font-size:17px;color:var(--green);margin:18px 0 8px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.row{display:flex;align-items:center;gap:10px}
.space{flex:1}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.money{font-weight:800;color:var(--green)}
.money.neg{color:var(--red)}
.pill{display:inline-block;background:var(--cream-2);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;color:var(--green)}
.pill.warn{background:#fdeeda;color:#9a6a1a}
.pill.bad{background:#fbe3e2;color:#a3332f}
.pill.ok{background:#e2f3ea;color:#1f7a4d}

.btn{background:var(--green);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:700}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.gold{background:var(--gold);color:var(--green-2)}
.btn.danger{background:var(--red)}
.btn.ghost{background:transparent;border:2px solid var(--green);color:var(--green)}
.btn.block{width:100%;margin-top:10px}
.btn:disabled{opacity:.5}

.field{margin-bottom:12px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--green);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:2px solid #e4ddc6;border-radius:11px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green)}
.field input[type=number]{font-variant-numeric:tabular-nums}
.hint{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}

.list-item{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid #f0ebda}
.list-item:last-child{border-bottom:0}
.list-item .grow{flex:1;min-width:0}
.list-item .t{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item .s{font-size:12px;color:var(--muted)}
.cat-tag{font-size:11px;font-weight:700;background:var(--cream-2);color:var(--green);border-radius:8px;padding:3px 8px;white-space:nowrap}
.icon-act{background:none;border:0;font-size:17px;padding:6px}

/* progress bars */
.bar{height:10px;background:#eee7d2;border-radius:99px;overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .4s}
.bar>i.over{background:var(--red)}
.bar>i.warn{background:var(--amber)}

/* explainer */
.explainer{background:#eef4ef;border-left:4px solid var(--green);border-radius:0 12px 12px 0;padding:12px 14px;font-size:13.5px;line-height:1.55;margin-bottom:14px;color:#33544e}

/* charts */
.chart-bar-row{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:8px}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
.chart-col .cb{width:70%;border-radius:6px 6px 0 0;background:var(--green);min-height:3px}
.chart-col .cb.out{background:var(--red)}
.chart-col .cb.in{background:var(--ok)}
.chart-col span{font-size:10px;color:var(--muted)}
.light{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px}
.light.g{background:var(--ok)}.light.y{background:var(--amber)}.light.r{background:var(--red)}

/* ---------- MONI dock ---------- */
#moni-dock{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:70;pointer-events:none;display:flex;justify-content:flex-end;align-items:flex-end;padding:0 14px 6px}
#moni-avatar{pointer-events:auto;width:84px;height:84px;border-radius:50%;border:3px solid var(--gold);background:var(--cream);box-shadow:0 8px 22px rgba(18,59,53,.3);padding:6px;position:relative;overflow:visible}
#moni-avatar svg{width:100%;height:100%;display:block;animation:moniSway2 6.4s ease-in-out infinite;transform-origin:50% 88%}
#moni-avatar .pupil{transform-box:fill-box;transform-origin:center;animation:moniBlink 4.8s infinite}
#moni-hide{pointer-events:auto;position:absolute;top:-6px;right:8px;width:24px;height:24px;border-radius:50%;border:0;background:var(--green);color:#fff;font-size:12px;line-height:1}
#moni-show{position:fixed;right:14px;bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));z-index:70;width:52px;height:52px;border-radius:50%;border:3px solid var(--gold);background:var(--cream);font-size:24px;box-shadow:0 8px 22px rgba(18,59,53,.3)}
body.moni-hidden{--moni-h:0px}
body.moni-hidden #moni-dock{display:none}
.moni-bubble{pointer-events:auto;position:absolute;right:104px;bottom:10px;max-width:min(72vw,300px);background:#fff;border-radius:14px;padding:10px 13px;font-size:13.5px;line-height:1.5;box-shadow:var(--shadow);border:1px solid #eee6cf}
.moni-bubble:after{content:"";position:absolute;right:-8px;bottom:22px;border:8px solid transparent;border-left-color:#fff;border-right:0}
.moni-bubble .who{font-weight:800;color:var(--green);font-size:12px;display:block;margin-bottom:2px}

/* chat */
.moni-chat{pointer-events:auto;position:absolute;right:0;bottom:96px;width:min(92vw,360px);height:420px;max-height:60vh;background:var(--cream);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden;border:1px solid #e7e0cb}
.chat-head{background:var(--green);color:#fff;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;font-weight:800}
.chat-head button{background:rgba(255,255,255,.15);border:0;color:#fff;border-radius:8px;font-size:15px;padding:5px 9px;margin-left:6px}
.chat-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:85%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.5}
.msg.moni{background:#fff;border:1px solid #eee6cf;align-self:flex-start;border-bottom-left-radius:4px}
.msg.user{background:var(--green);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg .qmark{display:inline-block;animation:qpop .5s}
@keyframes qpop{0%{transform:scale(0)}70%{transform:scale(1.4)}100%{transform:scale(1)}}
.chat-input-row{display:flex;gap:8px;padding:10px;border-top:1px solid #e7e0cb;background:#fff}
.chat-input-row input{flex:1;border:2px solid #e4ddc6;border-radius:10px;padding:9px 11px}
.chat-input-row button{background:var(--green);color:#fff;border:0;border-radius:10px;padding:9px 14px;font-weight:700}
.chat-input-row button.grey{background:#9aa5a1}

/* thinking dots */
.think span{display:inline-block;width:7px;height:7px;background:var(--gold-2);border-radius:50%;margin:0 2px;animation:tblink 1.2s infinite}
.think span:nth-child(2){animation-delay:.2s}.think span:nth-child(3){animation-delay:.4s}
@keyframes tblink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + var(--moni-h) + 18px);background:var(--green-2);color:#fff;padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;z-index:150;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:90vw;text-align:center}

/* money rain */
.money-rain{position:fixed;inset:0;pointer-events:none;z-index:140;overflow:hidden}
.bill{position:absolute;top:-40px;font-size:26px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(340deg);opacity:0}}

/* goal scenes */
.goal-scene{background:linear-gradient(150deg,var(--green) 0%,var(--green-3) 100%);border-radius:var(--radius);padding:18px;display:flex;align-items:center;justify-content:center;min-height:190px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.goal-scene img{max-width:100%;max-height:210px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35));animation:scenein .6s ease}
@keyframes scenein{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.goal-card{margin-bottom:16px}
.transform-veil{position:fixed;inset:0;background:rgba(13,43,38,.85);z-index:160;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff}
.transform-moni{width:150px;height:150px;animation:tspin 1.1s linear infinite}
@keyframes tspin{0%{transform:rotate(0) scale(1);opacity:1}50%{transform:rotate(180deg) scale(.85);opacity:.55}100%{transform:rotate(360deg) scale(1);opacity:1}}
.scene-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:220px;overflow-y:auto;margin-top:8px}
.scene-pick img{width:100%;height:64px;object-fit:contain;background:var(--green-2);border-radius:10px;padding:4px;border:2px solid transparent}
.scene-pick img.sel{border-color:var(--gold)}

/* celebrate */
.celebrate-veil{position:fixed;inset:0;z-index:160;background:rgba(13,43,38,.55);display:flex;align-items:center;justify-content:center}
.celebrate-card{background:var(--cream);border-radius:22px;padding:28px;text-align:center;max-width:340px;width:88%;animation:celpop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes celpop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.celebrate-card svg{width:170px;height:170px;animation:moniSway2 6.4s ease-in-out infinite;transform-origin:50% 88%}
.celebrate-card .pupil{transform-box:fill-box;transform-origin:center;animation:moniBlink 4.8s infinite}
.confetti{position:absolute;width:9px;height:14px;top:-20px;animation:cfall linear forwards}
@keyframes cfall{to{transform:translateY(105vh) rotate(720deg)}}

/* forms in modal */
#modal-box{text-align:left}
#modal-box h2{text-align:center}
.frow{display:flex;gap:10px}
.frow .field{flex:1}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;font-size:14px;font-weight:600;color:var(--green)}
.switch{position:relative;width:48px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:#cfc8ae;border-radius:99px;transition:.2s}
.switch .sl:before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.switch input:checked + .sl{background:var(--green)}
.switch input:checked + .sl:before{transform:translateX(20px)}

/* settings */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px;border-bottom:1px solid #f0ebda;font-size:14.5px}
.set-row:last-child{border:0}
.moni-opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.moni-opt{border:2px solid #e4ddc6;border-radius:12px;background:#fff;padding:8px 4px;font-size:12px;font-weight:700;color:var(--green)}
.moni-opt.sel{border-color:var(--green);background:#eef4ef}
.credit{text-align:center;padding:18px 0 6px;font-size:13px;color:var(--muted)}
.credit a{color:var(--green-3);font-weight:800;text-decoration:none}

/* annual */
.month-detail{border-top:1px dashed #e0d8bd;margin-top:8px;padding-top:8px;font-size:13px}

footer.appfoot{text-align:center;color:var(--muted);font-size:12px;padding:10px}
footer.appfoot a{color:var(--green-3);font-weight:700;text-decoration:none}

@media (min-width:700px){
  #moni-dock{max-width:640px;margin:0 auto}
  .moni-chat{right:14px}
}

/* respeta a quien prefiere menos movimiento: todo queda estático */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Language toggle */
.lang-toggle{position:absolute;top:14px;right:14px;display:flex;gap:6px;margin-top:0;z-index:10}
.lang-toggle button{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fffdf4;font-size:12px;font-weight:700;padding:6px 16px;border-radius:20px;cursor:pointer;transition:all .2s}
.lang-toggle button.active{background:#e7c97f;color:#123b35;border-color:#e7c97f}
.lang-toggle button:hover{border-color:#e7c97f}

/* ============ LOGO INTRO ANIMATION ============ */
/* La O dorada rebota en el centro, se desliza a su posición final,
   y las letras aparecen en cascada para formar MONEDAZO */
.boot-logo, .auth-brand{position:relative}
.mz-letter{display:inline-block;opacity:0;transform:translateY(14px) scale(.85)}
.mz-letter.mz-in{opacity:1;transform:none;transition:opacity .28s ease,transform .38s cubic-bezier(.34,1.45,.64,1)}
/* Respaldo CSS: si el JS no activa las letras en 7s, aparecen solas */
.mz-letter{animation:mzFallback .5s ease 7s forwards}
.mz-letter.mz-in{animation:none}
@keyframes mzFallback{to{opacity:1;transform:none}}
.mz-letter.zo{color:#e7c97f}
/* La O viajera: clon absoluto que rebota en el centro y se desliza */
.mz-traveler{position:absolute;z-index:5;color:#e7c97f;font-weight:900;pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.3);will-change:transform,opacity}
/* Brillo que cruza el ZO al final */
/* Letras del logo: aparecen en cascada con fade+subida sutil */
.mz-letter{opacity:0;transform:translateY(8px);display:inline-block;transition:opacity .3s ease,transform .3s ease}
.mz-letter.mz-in{opacity:1;transform:none}
/* Brillo de completado SOLO en la O: pulso dorado rápido, sutil y profesional */
.mz-oglow{position:relative}
.mz-oglow.go{animation:mzOGlowFast 1s ease-out forwards}
@keyframes mzOGlowFast{
  0%{text-shadow:0 0 0 rgba(231,201,127,0)}
  35%{text-shadow:0 0 18px rgba(231,201,127,.9),0 0 42px rgba(231,201,127,.45)}
  100%{text-shadow:0 0 0 rgba(231,201,127,0)}
}