/*
 * globos.css — Los dos globos de las páginas de Mi Hatchi que no cargan `app.js`.
 *
 * VA EN UN FICHERO Y NO INYECTADO DESDE JAVASCRIPT, Y ESTO COSTÓ UN RATO.
 *
 * La primera versión metía estas reglas con un `<style>` creado desde el propio script. En
 * hatchi.eu funcionaba; aquí NO, y sin decir nada: la política de contenidos de esta casa es
 * `style-src 'self'` sin `unsafe-inline`, así que el navegador se traga la hoja entera y la
 * descarta. El resultado era desconcertante — los globos estaban en el documento, visibles y con
 * su imagen cargada, pero `position: static` en vez de `fixed`: aparecían al final de la página,
 * a cinco mil píxeles de la pantalla.
 *
 * La señal para reconocerlo: `document.getElementById('hg-estilos').sheet` era `null`. Hay
 * etiqueta y hay texto dentro, pero no hay hoja: eso es la política, no un error de sintaxis.
 */

.hg-globo,.hg-bote{position:fixed;bottom:16px;z-index:2147483000;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.hg-globo{left:16px}
.hg-bote{right:16px}
@keyframes hg-flota{0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}
.hg-circulo{width:58px;height:58px;padding:0;border:0;border-radius:50%;background:#FFFFFF;color:#2D1F14;font-size:30px;cursor:pointer;border:1px solid #E4D8C6;display:grid;place-items:center;position:relative;box-shadow:0 14px 30px -14px rgba(45,31,20,.8);animation:hg-flota 4.5s ease-in-out infinite;transition:transform .16s cubic-bezier(.2,.8,.3,1);will-change:transform}
.hg-circulo img{width:44px;height:44px;border-radius:50%;display:block}
@media (hover:hover) and (pointer:fine){.hg-circulo:hover{transform:scale(1.07)}
}
@media (prefers-reduced-motion:reduce){.hg-circulo{animation:none}
}
.hg-punto{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:#4F8A4A;border:2px solid #FFFFFF}
.hg-panel{position:absolute;bottom:70px;width:min(268px,calc(100vw - 32px));background:#FFFFFF;color:#2D1F14;border:1px solid #E4D8C6;border-radius:18px;padding:16px 16px 14px;box-shadow:0 22px 44px -18px rgba(45,31,20,.55);opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);transition:opacity .18s,transform .18s,visibility .18s}
.hg-globo .hg-panel{left:0}
.hg-bote .hg-panel{right:0}
.hg-globo.hg-abierto .hg-panel,.hg-bote.hg-abierto .hg-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.hg-plegar{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:none;color:#6B5642;font-size:15px;cursor:pointer;display:grid;place-items:center;line-height:1}
.hg-plegar:hover{background:#FDF1DF}
.hg-tit{margin:0 26px 12px 0;font-weight:700;font-size:.98rem;line-height:1.25}
.hg-tit span{display:block;font-weight:400;font-size:.79rem;color:#6B5642;margin-top:3px}
.hg-tienda{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-top:8px;border-radius:12px;background:#2D1F14;color:#FFF7EC;text-decoration:none;transition:transform .14s,box-shadow .14s}
.hg-tienda:first-of-type{margin-top:0}
@media (hover:hover) and (pointer:fine){.hg-tienda:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(45,31,20,.6)}
}
.hg-tienda svg{flex:none}
.hg-tienda b{display:block;font-size:.88rem;line-height:1.2}
.hg-tienda small{display:block;font-size:.72rem;opacity:.75}
.hg-bote-cuerpo{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;margin-right:26px}
.hg-bote-cuerpo .hg-ic{font-size:1.7rem;line-height:1;flex:none}
.hg-bote-cuerpo b{display:block;font-size:.95rem;line-height:1.25}
.hg-bote-cuerpo small{display:block;font-size:.78rem;color:#6B5642;margin-top:2px}
.hg-bote .hg-circulo{background:#FFFFFF;color:#2D1F14}