/* RAPT GUÍA + Tío RAPT */
.guia-btn { position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 45; width: 64px; height: 64px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: none; border: 0; box-shadow: 0 12px 26px -8px rgba(255,30,30,.7); transition: transform .2s; -webkit-tap-highlight-color: transparent; }
.guia-btn:hover { transform: translateY(-3px) scale(1.04); }
.guia-btn[hidden] { display: none; }
.guia-btn .tio-svg { width: 64px; height: 64px; display: block; overflow: visible; }
.guia-btn::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255,30,30,.6); animation: guiaPulso 2.4s ease-out infinite; pointer-events: none; }
.guia-btn .burbuja { position: absolute; right: 70px; bottom: 10px; white-space: nowrap; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #f5e9dc; color: #120604; font: 800 .78rem/1.2 var(--f-body); box-shadow: 0 8px 20px rgba(0,0,0,.4); animation: guiaBurbuja .4s var(--ease) both; }
@media (min-width: 960px) { .guia-btn { bottom: 24px; right: 24px; } }
@keyframes guiaPulso { from { opacity: .9; transform: scale(.95); } to { opacity: 0; transform: scale(1.25); } }
@keyframes guiaBurbuja { from { opacity: 0; transform: translateY(6px); } }

.guia { position: fixed; z-index: 70; right: 16px; bottom: 16px; width: min(400px, calc(100vw - 24px)); height: min(600px, calc(100svh - 110px)); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #120807; border: 1px solid rgba(255,30,30,.45); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); animation: guiaAbrir .3s var(--ease); }
.guia[hidden] { display: none; }
@media (max-width: 600px) { .guia { right: 0; left: 0; bottom: 0; width: 100%; height: 82svh; border-radius: 24px 24px 0 0; } }
@keyframes guiaAbrir { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.guia__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: linear-gradient(90deg, #2a0b08, #170806); border-bottom: 1px solid rgba(255,255,255,.08); }
.guia__head .tio-svg { width: 44px; height: 44px; flex-shrink: 0; }
.guia__head b { display: block; font: 400 1.25rem/1 var(--f-display); letter-spacing: .04em; }
.guia__head small { color: var(--humo); font-size: .72rem; }
.guia__head .btn-icon { width: 40px; height: 40px; margin-left: auto; } .guia__head .btn-icon + .btn-icon { margin-left: 0; }
.guia__msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.gm { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.gm--bot { align-self: flex-start; background: #24110e; border: 1px solid rgba(255,255,255,.06); border-bottom-left-radius: 4px; }
.gm--yo { align-self: flex-end; background: #f5e9dc; color: #120604; border-bottom-right-radius: 4px; }
.gm a { color: var(--brasa); }
.gm .btn { margin-top: 8px; min-height: 40px; font-size: .74rem; }
.gm--escribiendo { display: flex; gap: 4px; } .gm--escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--humo); animation: tecleo 1s infinite; }
.gm--escribiendo i:nth-child(2) { animation-delay: .15s; } .gm--escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes tecleo { 50% { opacity: .2; transform: translateY(-3px); } }
.gchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.gchip { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,30,30,.5); color: var(--hueso); font-size: .78rem; font-weight: 700; background: rgba(255,30,30,.08); }
.gchip:hover { background: rgba(255,30,30,.25); }
.gresumen { margin-top: 8px; display: grid; gap: 4px; font-size: .84rem; }
.gresumen div { display: flex; justify-content: space-between; gap: 10px; } .gresumen .tot { border-top: 1px dashed rgba(255,255,255,.2); padding-top: 6px; font-weight: 800; }
.guia__form { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); background: #0e0605; }
.guia__form input { flex: 1; min-height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--hueso); font: inherit; }
.guia__form input:focus { outline: none; border-color: #ff1e1e; }
.guia__aviso { padding: 0 14px 6px; font-size: .68rem; color: var(--humo-2); }
.gform { display: grid; gap: 8px; margin-top: 8px; } .gform select, .gform textarea, .gform input { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.3); color: var(--hueso); font: inherit; }

/* ---------- Tío RAPT: microanimaciones dentro del círculo ---------- */
.tio-svg { width: 100%; height: 100%; fill: none; stroke: none; overflow: hidden; } /* aísla el dibujo de la regla global svg { stroke } */
.tio-svg g { transform-box: view-box; } .tio-todo, .monstruo { will-change: transform; }
.tio-cabeza { transform-origin: 60px 86px; }
/* Todo el año: guiño de lentes + leve cabeceo */
.guia-btn.anima:not(.guia-btn--inferno) .tio-cabeza { animation: tioGuino 1.1s ease-in-out; }
.guia-btn.anima:not(.guia-btn--inferno) .tio-brillo { animation: tioBrillo 1.1s ease-in-out; }
@keyframes tioGuino { 30% { transform: rotate(-6deg) translateY(-1px); } 60% { transform: rotate(3deg); } }
@keyframes tioBrillo { 0% { transform: translateX(-6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(8px); opacity: 0; } }
/* INFERNO: un monstruo asoma, el Tío se asusta, huye y vuelve por el otro lado */
.monstruo { transform: translateX(0); }
.guia-btn--inferno.anima .tio-todo { animation: tioHuye 3s cubic-bezier(.4,0,.2,1); }
.guia-btn--inferno.anima .monstruo.on { animation: monPersigue 3s cubic-bezier(.4,0,.2,1); }
.guia-btn--inferno.anima .tio-boca { animation: tioBoca 3s steps(1); }
.guia-btn--inferno.anima .tio-boca-o, .guia-btn--inferno.anima .tio-sudor { animation: tioSusto 3s steps(1); }
@keyframes tioHuye { 0%, 22% { transform: translate(0, 0); } 28% { transform: translate(-6px, -4px); } 34% { transform: translate(-3px, 0); } 58% { transform: translate(-130px, 0); } 59% { transform: translate(130px, 0); } 78%, 100% { transform: translate(0, 0); } }
@keyframes monPersigue { 0% { transform: translateX(0); } 20%, 30% { transform: translateX(-40px); } 72% { transform: translateX(-190px); } 100% { transform: translateX(-190px); } }
@keyframes tioBoca { 0%, 22% { opacity: 1; } 23%, 76% { opacity: 0; } 77% { opacity: 1; } }
@keyframes tioSusto { 0%, 22% { opacity: 0; } 23%, 76% { opacity: 1; } 77% { opacity: 0; } }
.guia-btn--inferno .tio-niebla { animation: niebla 6s ease-in-out infinite alternate; }
@keyframes niebla { to { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .guia-btn .tio-svg *, .guia-btn::after { animation: none !important; } }

/* Cubo con los logos oficiales de RAPT, Pirandello y Arena (encabezado de RAPT GUÍA) */
.guia__head .cubo { position: relative; width: 26px; height: 26px; margin-left: auto; perspective: 200px; flex: none; }
.guia__head .cubo + .btn-icon { margin-left: 4px; }
.cubo__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: girarCubo 7s linear infinite; }
.cubo__in i { position: absolute; inset: 0; background: center/cover #111; border: 1px solid rgba(255,215,0,.8); border-radius: 3px; }
.cubo__in i:nth-child(1) { transform: translateZ(13px); } .cubo__in i:nth-child(2) { transform: rotateY(90deg) translateZ(13px); }
.cubo__in i:nth-child(3) { transform: rotateY(180deg) translateZ(13px); } .cubo__in i:nth-child(4) { transform: rotateY(-90deg) translateZ(13px); }
@keyframes girarCubo { to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .cubo__in { animation: none; } }
@media (max-width: 560px) { .demo-banda span { display: none; } }