/* Mati, el manatí de Rialva: botón flotante, panel de misiones/preguntas y tour que resalta la pantalla */
:root { --mt-ink: #0E1B33; --mt-blue: #2463D4; --mt-lime: #DDEA32; }
.mt-fab { position: fixed; right: 14px; bottom: calc(var(--nav-h, 64px) + 14px + env(safe-area-inset-bottom)); z-index: 70; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px rgba(14, 27, 51, .3); cursor: pointer; display: grid; place-items: center; }
body.has-cartbar .mt-fab { bottom: calc(var(--nav-h, 64px) + 92px + env(safe-area-inset-bottom)); }
body:has(.buyrow) .mt-fab { bottom: calc(var(--nav-h, 64px) + 100px + env(safe-area-inset-bottom)); }
body.has-cartbar:has(.buyrow) .mt-fab { bottom: calc(var(--nav-h, 64px) + 178px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .mt-fab, body.has-cartbar .mt-fab, body:has(.buyrow) .mt-fab { bottom: 20px; right: 20px; } }
.mt-fab img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: #DFF1F4; position: relative; z-index: 1; }
.mt-ring { position: absolute; inset: -5px; border-radius: 50%; border: 3px solid var(--mt-lime); animation: mt-ring 2.4s ease-out infinite; }
.mt-lvb { position: absolute; right: -6px; bottom: -4px; z-index: 2; background: var(--mt-ink); color: #fff; font: 800 11px/1 inherit; padding: 4px 7px; border-radius: 999px; border: 2px solid #fff; }
.mt-fab:focus-visible, .mt-b:focus-visible, .mt-chip:focus-visible, .mt-close:focus-visible, .mt-x:focus-visible, .mt-tabs button:focus-visible { outline: 3px solid var(--mt-ink); outline-offset: 2px; }
.mt-hello { position: fixed; right: 14px; bottom: calc(var(--nav-h, 64px) + 86px + env(safe-area-inset-bottom)); z-index: 70; max-width: 230px; background: #fff; border-radius: 16px 16px 4px 16px; padding: 10px 14px; box-shadow: 0 10px 28px rgba(14, 27, 51, .28); display: grid; gap: 2px; cursor: pointer; animation: mt-in .4s ease both; font-size: 13px; color: var(--mt-ink); }
.mt-hello span { color: #586475; }
@media (min-width: 900px) { .mt-hello { bottom: 92px; right: 20px; } }

/* Panel */
.mt-panel { position: fixed; z-index: 1300; left: 0; right: 0; bottom: 0; max-height: 88dvh; display: flex; flex-direction: column; background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(14, 27, 51, .35); overflow: hidden; animation: mt-sheet .35s cubic-bezier(.2, .8, .3, 1) both; color: var(--mt-ink); }
@media (min-width: 700px) { .mt-panel { left: auto; right: 20px; bottom: 20px; width: 410px; max-height: min(680px, calc(100dvh - 40px)); border-radius: 24px; } }
.mt-head { display: flex; gap: 10px; align-items: flex-end; padding: 12px 14px 12px 8px; background: radial-gradient(circle at 25% 30%, #3F86F0 0, #2463D4 40%, #0E1B33 100%); color: #fff; position: relative; flex: none; }
.mt-stage { position: relative; width: 150px; height: 190px; flex: none; cursor: pointer; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out; touch-action: manipulation; }
.mt-aura { position: absolute; inset: 14% 6% 8%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(221, 234, 50, .0), rgba(221, 234, 50, .55), rgba(255, 255, 255, .0), rgba(94, 197, 232, .5), rgba(221, 234, 50, .0)); filter: blur(10px); animation: mt-spin 6s linear infinite; }
.mt-mati { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .35)); animation: mt-float 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
.mt-shadow { position: absolute; left: 22%; right: 22%; bottom: -4px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(4px); animation: mt-shadow 3.4s ease-in-out infinite; }
.mt-stage.hop .mt-mati { animation: mt-hop .7s cubic-bezier(.3, 1.5, .5, 1), mt-float 3.4s ease-in-out .7s infinite; }
.mt-sp { position: absolute; z-index: 2; color: var(--mt-lime); font-style: normal; font-size: 16px; animation: mt-twinkle 2s ease-in-out infinite; } .mt-sp.s1 { top: 6%; right: 6%; } .mt-sp.s2 { top: 36%; left: -2%; animation-delay: .6s; font-size: 12px; } .mt-sp.s3 { bottom: 24%; right: -2%; animation-delay: 1.2s; font-size: 13px; }
.mt-say { flex: 1; min-width: 0; background: #fff; color: var(--mt-ink); border-radius: 16px 16px 16px 4px; padding: 10px 12px; position: relative; margin-bottom: 4px; }
.mt-say b { font: 800 14px/1 Manrope, Inter, system-ui, sans-serif; color: var(--mt-blue); } .mt-say p { margin: 4px 0 8px; font-size: 14px; line-height: 1.35; min-height: 56px; }
.mt-lv small { display: block; font-size: 11.5px; color: #586475; margin-top: 3px; }
.mt-xp { height: 8px; border-radius: 999px; background: #E3E9F5; overflow: hidden; } .mt-xp i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mt-blue), var(--mt-lime)); transition: width .6s ease; }
.mt-close { position: absolute; top: 8px; right: 10px; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.mt-body { overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); }
.mt-tabs { display: flex; gap: 6px; margin: 0 0 10px; } .mt-tabs button { flex: 1; min-height: 44px; border: 1.5px solid #D9DFEA; border-radius: 999px; background: #fff; color: var(--mt-ink); font: 700 13px/1 inherit; cursor: pointer; } .mt-tabs button[aria-selected=true] { background: var(--mt-blue); border-color: var(--mt-blue); color: #fff; }
.mt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mt-list li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 1.5px solid #D9DFEA; border-radius: 16px; background: #fff; } .mt-list li.done { background: #EAF7EF; border-color: #BFE3CC; }
.mt-ic { width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; border-radius: 14px; background: #EAF1FD; } .mt-list b { display: block; font-size: 15px; } .mt-list small { color: #586475; font-size: 12.5px; }
.mt-b { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--mt-blue); color: #fff; font: 700 14px/1 inherit; cursor: pointer; } .mt-b.ghost { background: #EAF1FD; color: var(--mt-blue); }
.mt-ask { display: flex; gap: 8px; } .mt-ask input { flex: 1; min-width: 0; min-height: 48px; border: 1.5px solid #D9DFEA; border-radius: 14px; padding: 0 12px; font: inherit; font-size: 16px; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .mt-chip { min-height: 44px; padding: 0 12px; border: 1.5px solid #D9DFEA; border-radius: 999px; background: #fff; color: var(--mt-ink); font: 600 13px/1.2 inherit; cursor: pointer; text-align: left; }
.mt-ans { padding: 12px; border-radius: 16px; background: #F4F6FA; margin: 0 0 8px; animation: mt-in .3s ease both; } .mt-ans b { display: block; margin-bottom: 4px; } .mt-ans p { margin: 0; font-size: 14px; line-height: 1.45; } .mt-ans a { color: var(--mt-blue); font-weight: 600; }
.mt-help { margin-top: 8px; font-size: 13px; color: #586475; } .mt-help button { min-height: 40px; margin-left: 6px; padding: 0 12px; border: 1.5px solid #D9DFEA; border-radius: 999px; background: #fff; cursor: pointer; font: inherit; }
.mt-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mt-badge { text-align: center; padding: 10px 6px; border-radius: 16px; background: #F4F6FA; opacity: .55; } .mt-badge.on { background: #FFF8CC; opacity: 1; box-shadow: 0 0 0 2px var(--mt-lime) inset; } .mt-badge span { font-size: 28px; display: block; } .mt-badge small { font-size: 11.5px; line-height: 1.2; display: block; margin-top: 2px; }
.mt-note { margin: 10px 0 0; text-align: center; color: #586475; font-size: 13px; }
html.mt-open .mt-fab { display: none; }

/* Tour: resalta la pantalla real */
.mt-tour { position: fixed; inset: 0; z-index: 2000; }
.mt-tour::before { content: ""; position: fixed; inset: 0; }
.mt-spot { position: fixed; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(10, 22, 48, .68), 0 0 0 3px var(--mt-lime), 0 0 22px 6px rgba(221, 234, 50, .55); transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease; animation: mt-pulse 1.5s ease-in-out infinite; } .mt-spot[hidden] { display: none; }
.mt-tour:has(.mt-spot[hidden])::before { background: rgba(10, 22, 48, .68); }
.mt-card { position: fixed; left: 50%; width: min(460px, calc(100vw - 24px)); transform: translateX(-50%); bottom: calc(var(--nav-h, 64px) + 12px + env(safe-area-inset-bottom)); background: #fff; border-radius: 22px; padding: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); color: var(--mt-ink); }
.mt-card.top { top: 12px; bottom: auto; } .mt-card.mid { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
@media (min-width: 900px) { .mt-card { bottom: 24px; } }
.mt-card.pop { animation: mt-card .3s ease both; }
.mt-card-top { display: flex; gap: 10px; align-items: center; } .mt-card-top img { width: 48px; height: 48px; border-radius: 50%; background: #DFF1F4; object-fit: cover; flex: none; animation: mt-float 3s ease-in-out infinite; }
.mt-card-top div { flex: 1; min-width: 0; } .mt-card-top small { display: block; color: #586475; font-size: 12px; } .mt-card-top b { font: 800 17px/1.2 Manrope, Inter, system-ui, sans-serif; }
.mt-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #F1F3F8; font-size: 22px; cursor: pointer; flex: none; }
.mt-txt { margin: 8px 0 10px; font-size: 15px; line-height: 1.45; }
.mt-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; } .mt-dots i { width: 9px; height: 9px; border-radius: 50%; background: #D9DFEA; } .mt-dots i.on { background: var(--mt-blue); } .mt-dots i.cur { background: var(--mt-lime); box-shadow: 0 0 0 2px var(--mt-blue) inset; width: 22px; border-radius: 999px; }
.mt-nav { display: flex; gap: 8px; justify-content: flex-end; } .mt-nav .mt-b { flex: 1; } .mt-nav [hidden] { display: none; }
.mt-toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2100; display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 18px; padding: 10px 16px 10px 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .35); animation: mt-toast .45s cubic-bezier(.2, 1.2, .4, 1) both; max-width: calc(100vw - 24px); }
.mt-toast img { border-radius: 50%; background: #DFF1F4; } .mt-toast div { display: grid; font-size: 14px; } .mt-toast span { color: #586475; } .mt-toast.out { opacity: 0; transition: opacity .4s; }
.mt-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2050; pointer-events: none; }

@keyframes mt-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }
@keyframes mt-shadow { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(.78); opacity: .2; } }
@keyframes mt-hop { 0% { transform: scale(1, 1); } 25% { transform: scale(1.1, .86) translateY(4px); } 55% { transform: scale(.92, 1.12) translateY(-26px) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes mt-spin { to { transform: rotate(360deg); } }
@keyframes mt-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes mt-ring { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes mt-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mt-pulse { 0%, 100% { box-shadow: 0 0 0 9999px rgba(10, 22, 48, .68), 0 0 0 3px var(--mt-lime), 0 0 14px 2px rgba(221, 234, 50, .4); } 50% { box-shadow: 0 0 0 9999px rgba(10, 22, 48, .68), 0 0 0 5px var(--mt-lime), 0 0 30px 10px rgba(221, 234, 50, .7); } }
@keyframes mt-card { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes mt-toast { from { opacity: 0; transform: translate(-50%, -30px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .mt-fab *, .mt-panel, .mt-panel *, .mt-tour *, .mt-hello, .mt-toast, .mt-ans { animation: none !important; transition: none !important; }
  .mt-spot { box-shadow: 0 0 0 9999px rgba(10, 22, 48, .68), 0 0 0 4px var(--mt-lime); }
  .mt-stage { transform: none !important; }
}

/* Mati v2: minimizar / maximizar y asistente */
.mt-fab img, .mt-fab { background: transparent; } .mt-fab { box-shadow: 0 8px 22px rgba(14, 27, 51, .35); } .mt-fab img { box-shadow: none; }
.mt-card-top img, .mt-toast img { background: transparent; }
.mt-min, .mt-m { width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; font: 700 24px/1 inherit; flex: none; }
.mt-min { position: absolute; top: 8px; right: 58px; z-index: 3; background: rgba(255, 255, 255, .18); color: #fff; }
.mt-m { background: #F1F3F8; color: var(--mt-ink); }
.mt-min:focus-visible, .mt-m:focus-visible, .mt-chipmin:focus-visible { outline: 3px solid var(--mt-lime); outline-offset: 2px; }
.mt-panel[hidden] { display: none; }
.mt-tour.min { pointer-events: none; } .mt-tour.min::before { display: none; } .mt-tour.min .mt-card, .mt-tour.min .mt-spot { display: none; }
.mt-chipmin { position: fixed; right: 14px; bottom: calc(var(--nav-h, 64px) + 14px + env(safe-area-inset-bottom)); z-index: 2000; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 0; border-radius: 999px; background: #fff; color: var(--mt-ink); box-shadow: 0 10px 28px rgba(14, 27, 51, .4); cursor: pointer; pointer-events: auto; max-width: calc(100vw - 28px); animation: mt-in .3s ease both; }
.mt-chipmin[hidden] { display: none; } .mt-chipmin img { border-radius: 50%; } .mt-chipmin span { display: grid; text-align: left; min-width: 0; } .mt-chipmin b { font-size: 14px; } .mt-chipmin small { font-size: 12px; color: #586475; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-chipmin i { color: var(--mt-blue); font-style: normal; }
html.mt-tmin .mt-fab { display: none; }
@media (min-width: 900px) { .mt-chipmin { bottom: 20px; right: 20px; } }
.mt-go { display: grid; gap: 6px; margin: 4px 0 10px; } .mt-go small { color: #586475; font-size: 12.5px; text-align: center; } .mt-go .mt-b { min-height: 48px; }
.mt-lead { margin: 6px 0 0; font-weight: 700; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .mt-chipmin { animation: none; } }

/* Visibilidad de Mati */
.mt-fab[hidden] { display: none !important; }
.mt-fab.mt-pop { animation: mt-pop .8s cubic-bezier(.2, 1.6, .4, 1) both; } @keyframes mt-pop { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.mt-vis { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 12px 14px; min-height: 48px; border-radius: 14px; background: #F1F3F8; font-weight: 600; font-size: 14px; cursor: pointer; }
.mt-vis input { width: 22px; height: 22px; accent-color: var(--mt-blue, #1953DA); flex: none; }
[data-mati-menu] button { display: block; width: 100%; text-align: left; }
@media (prefers-reduced-motion: reduce) { .mt-fab.mt-pop { animation: none; } }

/* Travesuras de Mati */
.mt-fab.mt-g-jump { animation: mt-jump 1.1s cubic-bezier(.3, 1.4, .5, 1); }
.mt-fab.mt-g-wobble { animation: mt-wobble 1.2s ease-in-out; }
.mt-fab.mt-g-spin img { animation: mt-spin 1s ease-in-out; }
.mt-fab.mt-g-wink { animation: mt-wink 1s ease-in-out; }
@keyframes mt-jump { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-22px) scale(1.05); } 45% { transform: translateY(0) scale(1.1, .9); } 65% { transform: translateY(-10px); } }
@keyframes mt-wobble { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-16deg); } 30% { transform: rotate(13deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes mt-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes mt-wink { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.18) rotate(8deg); } 40% { transform: scale(.94) rotate(-6deg); } 60% { transform: scale(1.12) rotate(4deg); } }
.mt-quip { z-index: 1260; cursor: pointer; } .mt-quip b { font-weight: 700; font-size: 14px; line-height: 1.3; }
.mt-peek { position: fixed; bottom: calc(var(--nav-h, 64px) + 130px + env(safe-area-inset-bottom)); z-index: 1260; width: 62px; height: 150px; overflow: visible; cursor: pointer; filter: drop-shadow(0 8px 14px rgba(14, 27, 51, .3)); }
.mt-peek img { position: absolute; top: 0; width: 120px; height: auto; max-width: none; pointer-events: none; }
.mt-peek-r { right: 0; animation: mt-peek-r 5.2s ease-in-out both; } .mt-peek-r img { right: 0; transform-origin: 100% 70%; animation: mt-peek-sway 1.6s ease-in-out .7s 3; transform: translateX(46%) rotate(-10deg); }
.mt-peek-l { left: 0; animation: mt-peek-l 5.2s ease-in-out both; } .mt-peek-l img { left: 0; transform: translateX(-46%) rotate(10deg) scaleX(-1); }
.mt-peek-b { position: absolute; top: -34px; width: max-content; max-width: 210px; padding: 8px 12px; background: #fff; border-radius: 14px; box-shadow: 0 8px 22px rgba(14, 27, 51, .25); font: 700 13px/1.3 Inter, system-ui, sans-serif; color: #0E1B33; animation: mt-in .4s ease .5s both; }
.mt-peek-r .mt-peek-b { right: 42px; border-bottom-right-radius: 3px; } .mt-peek-l .mt-peek-b { left: 42px; border-bottom-left-radius: 3px; }
.mt-peek.out { animation: none; opacity: 0; transition: opacity .5s; }
@keyframes mt-peek-r { 0% { transform: translateX(110%); } 14%, 84% { transform: translateX(0); } 100% { transform: translateX(110%); } }
@keyframes mt-peek-l { 0% { transform: translateX(-110%); } 14%, 84% { transform: translateX(0); } 100% { transform: translateX(-110%); } }
@keyframes mt-peek-sway { 0%, 100% { transform: translateX(46%) rotate(-10deg); } 50% { transform: translateX(34%) rotate(-2deg); } }
@media (min-width: 900px) { .mt-peek { bottom: 140px; } }
@media (prefers-reduced-motion: reduce) { .mt-peek, .mt-peek img, .mt-peek-b { animation: none !important; transform: none; } .mt-peek-r img { transform: translateX(46%) rotate(-10deg); } .mt-peek-l img { transform: translateX(-46%) rotate(10deg) scaleX(-1); } }

/* Cerebro de Mati: acciones del personaje del panel */
.mt-stage[data-act] .mt-mati { animation-duration: 1s; }
.mt-stage[data-act=wave] .mt-mati { animation: mt-a-wave 1.5s ease-in-out; }
.mt-stage[data-act=dance] .mt-mati { animation: mt-a-dance 2s ease-in-out; }
.mt-stage[data-act=spin] .mt-mati { animation: mt-a-spin 1s ease-in-out; }
.mt-stage[data-act=hop] .mt-mati, .mt-stage[data-act=cheer] .mt-mati { animation: mt-a-cheer 1.2s cubic-bezier(.3, 1.5, .5, 1); }
.mt-stage[data-act=look] .mt-mati { animation: mt-a-look 1.8s ease-in-out; }
.mt-stage[data-act=think] .mt-mati { animation: mt-a-think 1.8s ease-in-out; }
.mt-stage[data-act=yawn] .mt-mati { animation: mt-a-yawn 2.2s ease-in-out; }
.mt-stage[data-act=shrug] .mt-mati { animation: mt-a-shrug 1.1s ease-in-out; }
.mt-stage[data-act=dizzy] .mt-mati { animation: mt-a-dizzy 1.7s ease-in-out; }
.mt-stage[data-act=lean] .mt-mati { animation: mt-a-lean 2.4s ease-in-out; }
.mt-stage[data-act=sleep] .mt-mati { animation: mt-a-sleep 3.2s ease-in-out infinite; }
.mt-stage[data-act=sleep] .mt-aura { opacity: .3; animation-duration: 20s; }
@keyframes mt-a-wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-12deg) translateY(-6px); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-12deg) translateY(-6px); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-3deg); } }
@keyframes mt-a-dance { 0%, 100% { transform: translate(0, 0) rotate(0); } 12% { transform: translate(-14px, -10px) rotate(-12deg); } 25% { transform: translate(0, 0) rotate(0) scale(1.04, .96); } 37% { transform: translate(14px, -10px) rotate(12deg); } 50% { transform: translate(0, 0) rotate(0) scale(1.04, .96); } 62% { transform: translate(-14px, -12px) rotate(-14deg); } 75% { transform: translate(14px, -12px) rotate(14deg); } 88% { transform: translateY(-14px) rotate(0); } }
@keyframes mt-a-spin { from { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(180deg) translateY(-14px); } to { transform: rotateY(360deg) translateY(0); } }
@keyframes mt-a-cheer { 0% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(0) scale(1.1, .88); } 50% { transform: translateY(-32px) scale(.95, 1.08) rotate(-6deg); } 75% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }
@keyframes mt-a-look { 0%, 100% { transform: scaleX(1); } 20%, 45% { transform: scaleX(-1) translateX(4px); } 60%, 85% { transform: scaleX(1) rotate(4deg); } }
@keyframes mt-a-think { 0%, 100% { transform: rotate(0); } 25%, 70% { transform: rotate(-9deg) translateX(-4px); } }
@keyframes mt-a-yawn { 0%, 100% { transform: scale(1); } 35%, 65% { transform: scale(1.1, 1.14) translateY(-4px); } }
@keyframes mt-a-shrug { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-8px) rotate(-5deg); } 40% { transform: translateY(0) rotate(5deg); } 60% { transform: translateY(-8px) rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes mt-a-dizzy { 0% { transform: rotate(0); } 25% { transform: rotate(18deg) translateX(8px); } 50% { transform: rotate(-18deg) translateX(-8px); } 75% { transform: rotate(14deg) translateX(6px); } 100% { transform: rotate(0); } }
@keyframes mt-a-lean { 0%, 100% { transform: rotate(0); } 15%, 85% { transform: rotate(7deg) translateY(4px); } }
@keyframes mt-a-sleep { 0%, 100% { transform: rotate(9deg) translateY(10px) scale(1, 1); } 50% { transform: rotate(10deg) translateY(12px) scale(1.02, .98); } }
.mt-fx { position: absolute; left: var(--x, 50%); top: 30%; z-index: 4; font-size: 22px; pointer-events: none; animation: mt-fx 1.8s ease-out forwards; }
@keyframes mt-fx { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: 1; transform: translate(0, -10px) scale(1.1); } 100% { transform: translate(var(--dx, 0), -70px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mt-fx { display: none; } }

/* Mati 3D real: el lienzo reemplaza a la imagen plana cuando el modelo está listo */
.mt-stage.is3d { transform: none !important; }
.mt-stage.is3d .mt-mati { display: none; }
.mt-3d { position: relative; z-index: 1; display: block; width: 100%; height: 100%; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .3)); cursor: grab; }
.mt-3d:active { cursor: grabbing; }

/* Frases de Mati dentro de la interfaz */
.mv-line { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; color: #3d4a5e; font-weight: 600; }
.mv-line img, .tlh-mati img { border-radius: 50%; flex: none; background: #DFF1F4; }
.tlh-mati { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13.5px; color: #3d4a5e; font-weight: 600; }

/* Que Mati no se asome detrás de la barra inferior, el carrito flotante o la barra de compra en móvil */
body.has-cartbar .mt-peek { bottom: calc(var(--nav-h, 64px) + 200px + env(safe-area-inset-bottom)); }
body:has(.buyrow) .mt-peek { bottom: calc(var(--nav-h, 64px) + 210px + env(safe-area-inset-bottom)); }
@media (max-width: 480px) { .mt-peek-b { max-width: 170px; font-size: 12.5px; } }

/* Chat con Mati: la conversación queda arriba, las acciones debajo */
.mt-chat { display: grid; gap: 8px; margin: 4px 0 10px; max-height: 46vh; overflow-y: auto; scroll-behavior: smooth; }
.mt-chat:empty { display: none; }
.mt-me { display: flex; justify-content: flex-end; animation: mt-in .25s ease both; }
.mt-me span { max-width: 82%; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--mt-blue, #1953DA); color: #fff; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.mt-bot { display: flex; align-items: flex-start; gap: 8px; animation: mt-in .3s ease both; }
.mt-bot > img { flex: none; border-radius: 50%; background: #DFF1F4; margin-top: 2px; }
.mt-botc { min-width: 0; flex: 1; }
.mt-botc .mt-ans { margin-bottom: 6px; border-radius: 16px 16px 16px 4px; }


/* ====== Chat de Mati (pestaña "Pregúntale a Mati"): mensajes con scroll único, atajos en una fila y caja de escritura fija ====== */
.mt-panel[data-tab=ask] { height: min(640px, 88dvh); max-height: none; }
@media (min-width: 700px) { .mt-panel[data-tab=ask] { height: min(640px, calc(100dvh - 40px)); } }
.mt-panel[data-tab=ask] .mt-head { padding: 8px 52px 8px 8px; align-items: center; }
.mt-panel[data-tab=ask] .mt-stage { width: 84px; height: 106px; }
.mt-panel[data-tab=ask] .mt-say { padding: 8px 12px; margin: 0; }
.mt-panel[data-tab=ask] .mt-say p { min-height: 0; margin: 2px 0 4px; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-panel[data-tab=ask] .mt-lv small { display: none; }
.mt-panel[data-tab=ask] .mt-sp { display: none; }
.mt-panel[data-tab=ask] .mt-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 10px 0 0; }
.mt-panel[data-tab=ask] .mt-tabs { margin: 0 14px 8px; flex: none; }
.mt-panel[data-tab=ask] .mt-chat { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 6px 14px 12px; background: linear-gradient(#F4F6FA, #F4F6FA) ; border-top: 1px solid #E3E9F5; scroll-behavior: smooth; }
.mt-panel[data-tab=ask] .mt-chat:empty { display: flex; }
.mt-chat .mt-me { align-self: flex-end; max-width: 86%; display: block; }
.mt-chat .mt-me span { display: block; padding: 9px 13px; border-radius: 18px 18px 4px 18px; background: var(--mt-blue, #1953DA); color: #fff; font-size: 14.5px; line-height: 1.35; box-shadow: 0 2px 6px rgba(25, 83, 218, .25); }
.mt-chat .mt-bot { align-self: flex-start; max-width: 94%; gap: 8px; }
.mt-chat .mt-bot > img { width: 30px; height: 30px; box-shadow: 0 1px 4px rgba(14, 27, 51, .2); }
.mt-chat .mt-botc .mt-ans { margin: 0 0 6px; padding: 10px 12px; background: #fff; border: 1px solid #E3E9F5; border-radius: 4px 18px 18px 18px; box-shadow: 0 1px 3px rgba(14, 27, 51, .06); }
.mt-chat .mt-ans b { font-size: 14px; margin-bottom: 3px; } .mt-chat .mt-ans p { font-size: 14px; line-height: 1.4; }
.mt-chat .mt-help { margin-top: 8px; padding-top: 8px; border-top: 1px solid #EEF1F7; font-size: 13px; color: #586475; }
.mt-chat .mt-chips { gap: 6px; margin: 4px 0 2px; } .mt-chat .mt-chip { min-height: 38px; font-size: 13px; padding: 0 12px; }
.mt-chat .mt-go { display: flex; margin: 2px 0 6px; } .mt-chat .mt-go .mt-b { min-height: 42px; padding: 0 16px; font-size: 14px; border-radius: 999px; }
.mt-chat .mt-go small { text-align: left; }
.mt-dock { flex: none; background: #fff; border-top: 1px solid #E3E9F5; padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 14px rgba(14, 27, 51, .05); }
.mt-rail { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 8px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.mt-rail::-webkit-scrollbar { display: none; }
.mt-rail .mt-chip { flex: none; scroll-snap-align: start; white-space: nowrap; min-height: 38px; font-size: 13px; padding: 0 12px; }
.mt-chip.nav { background: #EEF4FF; border-color: #C9DBFF; color: #1953DA; }
.mt-dock .mt-ask { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 14px; }
.mt-dock .mt-ask input { flex: 1; min-width: 0; min-height: 46px; border: 1.5px solid #D9DFEA; border-radius: 999px; padding: 0 16px; font: inherit; font-size: 16px; background: #F7F9FC; }
.mt-dock .mt-ask input:focus { outline: none; border-color: var(--mt-blue, #1953DA); background: #fff; box-shadow: 0 0 0 3px rgba(25, 83, 218, .15); }
.mt-send { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--mt-blue, #1953DA); color: #fff; cursor: pointer; box-shadow: 0 3px 8px rgba(25, 83, 218, .35); transition: transform .12s ease; }
.mt-send:active { transform: scale(.93); } .mt-send:focus-visible { outline: 3px solid var(--mt-ink); outline-offset: 2px; }
.mt-panel[data-tab=ask] .mt-vis { display: none; }
.mt-ans p b, .mt-ans p strong, .mt-ans p a { display: inline; margin: 0; }
.mt-panel[data-tab=ask] .mt-chat { position: relative; }

/* ====== Motor de Mati: actor con poses reales + microanimaciones ====== */
.mt-fab img { animation: mt-breathe 6s ease-in-out infinite; transform-origin: 50% 80%; } @keyframes mt-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.ma { position: fixed; z-index: 2005; width: 110px; height: 110px; pointer-events: none; opacity: 0; transform: translateY(14px) scale(.92); transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.3, .4, 1); }
.ma.on { opacity: 1; transform: none; } .ma.on.out { opacity: 0; transform: translateY(10px) scale(.94); transition-duration: .3s; }
.ma-img { width: 110px; height: 110px; object-fit: contain; display: block; filter: drop-shadow(0 6px 8px rgba(14, 27, 51, .28)); transform-origin: 50% 90%; }
.ma[data-side=l].ma-point .ma-img { scale: -1 1; }
.ma-bub { position: absolute; right: calc(100% - 8px); bottom: 38%; width: max-content; max-width: min(210px, calc(100vw - 150px)); padding: 8px 30px 8px 12px; background: #fff; color: #0E1B33; border-radius: 14px 14px 4px 14px; box-shadow: 0 8px 22px rgba(14, 27, 51, .28); font: 700 13px/1.3 Inter, system-ui, sans-serif; pointer-events: auto; cursor: pointer; }
.ma-bub[hidden] { display: none; }
.ma[data-side=l] .ma-bub { right: auto; left: calc(100% - 8px); border-radius: 14px 14px 14px 4px; }
.ma.tgt .ma-bub { right: 0; left: auto; bottom: calc(100% + 4px); }
.ma-x { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #586475; font-size: 18px; line-height: 1; cursor: pointer; }
.ma-x:focus-visible { outline: 2px solid #1953DA; }
.ma-fx { position: absolute; inset: 0; } .ma-fx span { position: absolute; left: var(--x, 50%); top: 15%; font-size: 20px; animation: mt-fx 1.8s ease-out forwards; }
.ma-sway .ma-img { animation: ma-sway 1s ease-in-out 3; } @keyframes ma-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.ma-tilt .ma-img { animation: ma-tilt 3s ease-in-out both; } @keyframes ma-tilt { 0%, 100% { transform: rotate(0); } 25%, 70% { transform: rotate(-7deg) translateY(2px); } }
.ma-pulse .ma-img { animation: ma-pulse 1s ease-in-out 2; } @keyframes ma-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.ma-dance .ma-img { animation: ma-dance .8s ease-in-out infinite; } @keyframes ma-dance { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }
.ma-lean .ma-img { animation: ma-lean 3s ease-in-out both; } @keyframes ma-lean { 0%, 100% { transform: none; } 25%, 75% { transform: rotate(7deg) translateX(6px); } }
.ma-sniff .ma-img { animation: ma-sniff 1.1s ease-in-out infinite; } @keyframes ma-sniff { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px) rotate(2deg); } }
.ma-bounce .ma-img { animation: ma-bounce .5s ease-out 4; } @keyframes ma-bounce { 0%, 100% { transform: translateY(0) scale(1.04, .96); } 50% { transform: translateY(-16px) scale(.97, 1.04); } }
.ma-bow .ma-img { animation: ma-bow 1.4s ease-in-out 2; } @keyframes ma-bow { 0%, 100% { transform: none; } 40%, 60% { transform: rotate(12deg) scaleY(.95) translateY(4px); } }
.ma-peek.edge .ma-img { animation: ma-peek 4s ease-in-out both; } @keyframes ma-peek { 0% { transform: translateX(-70%); } 18%, 82% { transform: translateX(0); } 100% { transform: translateX(-70%); } }
.ma-shake .ma-img { animation: ma-shake .5s ease-in-out 6; } @keyframes ma-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.ma-snooze .ma-img { animation: ma-snooze 2.4s ease-in-out infinite; } @keyframes ma-snooze { 0%, 100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.04) rotate(1deg); } }
.ma-point .ma-img { animation: ma-point .7s ease-in-out 3; } @keyframes ma-point { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px) rotate(3deg); } }
.ma-spin .ma-img { animation: ma-spin 4s ease-in-out both; } @keyframes ma-spin { 0% { transform: rotate(0); } 28% { transform: rotate(360deg); } 40% { transform: rotate(372deg); } 52% { transform: rotate(352deg); } 64%, 100% { transform: rotate(360deg); } }
.ma-pose .ma-img { animation: ma-pulse .7s ease-in-out 6; }
.ma.static .ma-img { animation: none !important; }
@media (max-width: 480px) { .ma, .ma-img { width: 92px; height: 92px; } .ma-bub { max-width: calc(100vw - 130px); font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .ma { transition: opacity .2s; transform: none; } .ma-fx { display: none; } }