



:root{--lila:#ff7a59;--lila-d:#c94f1f;--tinta:#2b2d42;--rosa:#ffe9df;--amarillo:#ffd36b;--azul:#d6e4f5;--menta:#d4f0d9;--durazno:#ffe1cc}
body{font-family:system-ui,'Segoe UI',sans-serif;background:radial-gradient(ellipse at 0 25%,#ffe9dfaa,transparent 55%),radial-gradient(ellipse at 100% 85%,#dff1ff88,transparent 55%),#eef5ff;color:#2b2d42}
.app{max-width:1120px;padding-top:0}.blob,.deco{display:none}.mc-header{display:flex;align-items:center;gap:24px;min-height:76px;border-bottom:1px solid #cfe0f5;color:#3c4a6b}.mc-wordmark{font-family:"Trebuchet MS",system-ui,sans-serif;font-size:30px;color:#e8622c;text-decoration:none;white-space:nowrap}.mc-header>span{flex:1;text-align:center;font-size:12px}.mc-site{font-size:12px;color:#4a5a7a;text-decoration:none}.mc-intro{text-align:center;margin:24px auto 28px;max-width:640px}.mc-intro>p:first-child{font-size:11px;letter-spacing:2px;color:#e8622c;font-weight:700}.mc-intro>p:last-child{font-size:15px;line-height:1.5;color:#4a5a7a;margin-top:12px}.mc-intro h1{font-family:"Trebuchet MS",system-ui,sans-serif;font-size:clamp(40px,5.2vw,66px);font-weight:700;line-height:.95;color:#e8622c;text-shadow:none;letter-spacing:-1px;margin:12px 0}.mc-intro h1 em{font-family:"Trebuchet MS",system-ui,sans-serif;font-weight:400;color:#2f8f4e;white-space:nowrap;letter-spacing:0}
.etiqueta{font-size:17px;color:#3c4a6b;margin:16px 0 10px}.panel{background:#f4f8ff;border:1px solid #dbe8f8;box-shadow:0 8px 24px #4a5a7a10;backdrop-filter:none}.formas{grid-template-columns:repeat(4,1fr);gap:14px;padding:14px}.forma{background:#eaf3ff;box-shadow:0 4px 0 #cddcf3;color:#2b2d42;border-radius:18px}.forma span{font-size:13px}.forma canvas{max-width:105px}.forma.activa{border-color:#5cbf73;box-shadow:0 0 0 3px #bfe6c655,0 4px 0 #cdeed4}.forma.activa::after{background:#2f8f4e}.forma.crear{background:#fff1e6!important;border-color:#ffc2a3!important}.forma.crear .ico-crear{font-size:38px}.lienzo .fondo{background-color:#fbfdff;background-image:linear-gradient(#ff9f1c10 1px,transparent 1px),linear-gradient(90deg,#ff9f1c10 1px,transparent 1px)}.lienzo .titulo{color:#5a6a8a}.color h3{color:#e8622c}.pintar{grid-template-columns:1fr 260px;gap:18px}.color .actual{color:#3c4a6b}.rueda{filter:saturate(.9)}.listo{background:#5cbf73}.mochi{width:130px;bottom:12px}.mochi svg{border-radius:50%;border:3px solid #ffd7bf;box-shadow:0 5px 18px #4a5a7a29;background:#fff1e6}.burbuja{background:#f4f8ff;color:#2b2d42;border-color:#cfe0f5}.burbuja::after{border-top-color:#f4f8ff}.btn-sonido{color:#2b2d42;background:#eaf3ff;top:90px}.btn-expo{right:64px}.combo-letra{color:#ff8a3d!important;text-shadow:0 3px 0 #c94f1f!important;-webkit-text-stroke-color:#ffffff!important}.combo-nombre{background:#e8622c!important}.av{font-family:system-ui,sans-serif;background:#f4f8ff;color:#2b2d42;--av-world:#eaf3ff;--av-accent:#e8622c}.av header{background:#f4f8ff;border-color:#dbe8f8}.av h2,.av h3{font-family:"Trebuchet MS",system-ui,sans-serif}.av h2{color:#e8622c}.av header p{color:#3c4a6b}.av-guide{background:#eaf3ff;color:#2b2d42}.av button{background:#eaf3ff;color:#2b2d42}.av button:hover{background:#d6e4f5}.av .av-primary,.av [aria-pressed=true]{background:var(--av-accent);color:white}.av input,.av textarea{border-color:#cfe0f5;color:#2b2d42;background:#ffffff}.av-step,.av-tip,.av-status{color:#5a6a8a}.av summary{color:#4a5a7a}.av-home-art,.av-stage{background:var(--av-world)}.av-close{background:#eaf3ff!important}.av .av-world-card{background:#eaf3ff}.av .av-world-card[aria-pressed=true]{background:var(--av-accent)}.av-character-speech{color:#2b2d42}.av-theater{background:#ffffff}.av-personalize,.av-edit{border-color:#cddcf3}.av-portrait{background:#e3edfb}.av-library{border-color:#cddcf3}.av-library img{background:#e3edfb}.av-filmstrip button{background:#eaf3ff}.pet-care{background:#eaf3ff}.pet-eye,.pet-mouth{border-color:#2b2d42}.pet-eye{background:#2b2d42}.pet-needs meter{accent-color:#3a9d4f}.aventura-entrada{background:#e8622c;color:#ffffff}.av-stage-caption{color:#2b2d42}.final h2,.taller-caja h2,.real-caja h2{font-family:"Trebuchet MS",system-ui,sans-serif;color:#e8622c}.final p{color:#4a5a7a}.taller-caja,.real-caja{background:#f4f8ff}.taller-hoja{background:#eef5ff}.taller-nombre input{color:#2b2d42;border-color:#9fc0e8}.herramientas{margin-top:14px}.av button:focus-visible,.av input:focus-visible,.av textarea:focus-visible,.av summary:focus-visible,.mc-header a:focus-visible,.mochi svg:focus-visible{outline:3px solid #8e672c;outline-offset:3px}
@media(max-width:650px){.mc-header{min-height:52px;gap:8px}.mc-wordmark{font-size:23px}.mc-header>span{display:none}.mc-site{margin-left:auto;font-size:11px}.mc-intro{margin:10px 0 8px}.mc-intro>p:first-child{display:none}.mc-intro h1{font-size:34px;margin:5px 0}.mc-intro>p:last-child{font-size:11px;margin:5px 0;max-width:280px}.etiqueta{display:none}.app{height:auto;min-height:100dvh;padding-bottom:22px}.formas{margin:6px 0}.forma canvas{max-width:58px}.pintar{display:flex;min-height:310px;flex:none}.lienzo{min-height:300px;flex:none}.lienzo .fondo{min-height:280px}.respira{width:min(100%,290px)}#lienzo{max-width:290px}.herramientas{flex:none}.btn-sonido{top:66px;right:6px;width:32px;height:32px;font-size:16px}.btn-expo{right:42px}.mochi{width:68px;bottom:16px;left:auto;right:8px}.burbuja{right:4px;left:auto;bottom:70px;max-width:240px}.mc-intro h1{margin-right:65px}.av h3{font-size:23px}}
.mochi svg{overflow:hidden}.forma.crear span{color:#e8622c}.mc-intro .letra{color:inherit;text-shadow:none}.mc-intro em{display:inline-block}

/* Perritos: el render ya trae ojos y nariz; sin la carita sobrepuesta de los postres */
.pet-face{display:none!important}

/* --- Mi perro de verdad (perro-real.js) --- */
.pr{border:0;border-radius:28px;padding:0;width:min(460px,calc(100% - 16px));max-height:94dvh;color:#2b2d42;background:#f4f8ff;box-shadow:0 20px 60px #2b2d4240}
.pr::backdrop{background:#2b2d4266;backdrop-filter:blur(3px)}
.pr-caja{padding:16px 18px 20px}
.pr header{display:flex;align-items:center;justify-content:space-between}
.pr h2{margin:0;font:800 22px "Trebuchet MS",system-ui,sans-serif;color:#e8622c}
.pr h3{margin:14px 0 8px;font-size:15px}
.pr-x{width:40px;height:40px;border-radius:50%;border:0;background:#fff;font-size:22px;cursor:pointer}
.pr-privado{margin:4px 0 10px;font-size:12px;color:#5a6a8a}
.pr-foto{position:relative;display:block;border-radius:20px;overflow:hidden;background:#fff;border:3px dashed #9fc0e8;cursor:pointer}
.pr-foto canvas{display:block;width:100%;height:auto;aspect-ratio:1}
.pr-vacio{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:18px;color:#3c4a6b;padding:20px;text-align:center}
.pr-colores,.pr-ops{display:flex;flex-wrap:wrap;gap:8px}
.pr-colores button,.pr-ops button{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border-radius:16px;border:2px solid #cfe0f5;background:#fff;font:700 14px system-ui;color:#2b2d42;cursor:pointer}
.pr-colores i{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px #2b2d4233}
.pr-ops b{font-size:20px}
.pr-colores button[aria-pressed=true],.pr-ops button[aria-pressed=true]{border-color:#3a9d4f;background:#e9f7ec}
.pr-nombre{width:100%;font:800 20px system-ui;padding:10px 12px;border-radius:14px;border:3px solid #cfe0f5;margin-bottom:12px}
.pr-hacer{width:100%;min-height:52px;border:0;border-radius:18px;background:#3a9d4f;color:#fff;font:900 18px system-ui;box-shadow:0 5px 0 #2a7a3c;cursor:pointer}
.pr-boton .ico-crear{font-size:28px}
.pr-vacio[hidden]{display:none}
/* Firu: la cola se mueve sola y las orejas se sacuden de vez en cuando */
.f-cola{transform-box:fill-box;transform-origin:0% 85%;animation:f-cola 1.1s ease-in-out infinite alternate}
@keyframes f-cola{from{transform:rotate(-6deg)}to{transform:rotate(10deg)}}
.f-orejas{transform-box:fill-box;transform-origin:50% 100%;animation:f-orejas 5s ease-in-out infinite}
@keyframes f-orejas{0%,86%,100%{transform:none}90%{transform:scaleY(.86) rotate(-2deg)}94%{transform:scaleY(1.04) rotate(2deg)}}
.mochi.boca .f-cola{animation-duration:.35s}
@media (prefers-reduced-motion: reduce){.f-cola,.f-orejas{animation:none}}
