.bot{
  position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:950; padding:9px 20px 9px 9px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--noche); color:var(--blanco);
  display:flex; align-items:center; gap:11px; text-align:left;
  max-width:calc(100vw - 36px);
  box-shadow:0 10px 30px rgba(6,42,77,.3);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease;
}
.bot:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(6,42,77,.36); }
.bot__txt{ font-size:13px; font-weight:600; letter-spacing:.01em; }
.porf{
  position:relative; display:block;
  width:56px; height:56px; flex:0 0 56px; border-radius:50%;
  background:var(--blanco); transform-origin:50% 92%;
  animation:porf-respira 3.4s ease-in-out infinite;
}
.porf::after{
  content:''; position:absolute; left:50%; bottom:-6px;
  width:30px; height:5px; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(6,42,77,.28), transparent 70%);
}
.porf__gesto{
  position:absolute; inset:0; display:block; transform-origin:50% 92%;
  animation:porf-ciclo 14s ease-in-out infinite;
}
.porf__cara{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.porf__parpado{
  position:absolute; border-radius:50% 50% 46% 46%;
  background:linear-gradient(#EFEBE9 62%, #DDD6D2);
  transform:scaleY(0); transform-origin:50% 0%;
  animation:porf-parpadeo 14s ease-in-out infinite;
}
.porf__parpado--i{ left:21.8%; top:43.8%; width:16.6%; height:16.6%; }
.porf__parpado--d{ left:59.9%; top:47.8%; width:14.6%; height:14.6%; }
.porf__lengua{
  position:absolute; left:41.8%; top:84%; width:12.6%; height:13.5%;
  background:linear-gradient(#F86A84 55%, #E2506C);
  border-radius:30% 30% 46% 46%;
  transform:scaleY(0); transform-origin:50% 0%;
  animation:porf-lengua 14s ease-in-out infinite;
}
.bot:hover .porf__gesto{ animation:none; transform:rotate(-7deg) translateY(-2px); transition:transform .3s ease; }
.bot:hover .porf__lengua{ animation:none; transform:scaleY(1); transition:transform .18s cubic-bezier(.34,1.5,.64,1); }
@keyframes porf-respira{
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%    { transform:scale(1.024) rotate(-.9deg); }
}
@keyframes porf-ciclo{
  0%,28%  { transform:translateY(0) rotate(0deg) scale(1,1); }
  33%     { transform:translateY(0) rotate(-8deg) scale(1,1); }
  40%     { transform:translateY(0) rotate(6deg)  scale(1,1); }
  45%,57% { transform:translateY(0) rotate(0deg) scale(1,1); }
  61%     { transform:translateY(3px)   rotate(0deg) scale(1.13,.86); }
  68%     { transform:translateY(-19px) rotate(-5deg) scale(.92,1.14); }
  74%     { transform:translateY(-21px) rotate(0deg) scale(1,1); }
  80%     { transform:translateY(0)     rotate(3deg) scale(1.14,.86); }
  84%     { transform:translateY(-4px)  rotate(-1deg) scale(.97,1.03); }
  88%,100%{ transform:translateY(0) rotate(0deg) scale(1,1); }
}
@keyframes porf-parpadeo{
  0%,5%   { transform:scaleY(0); }
  6.4%    { transform:scaleY(1); }
  7.8%    { transform:scaleY(0); }
  20%     { transform:scaleY(0); }
  21.2%   { transform:scaleY(1); }
  22.6%   { transform:scaleY(0); }
  49%     { transform:scaleY(0); }
  50.2%   { transform:scaleY(1); }
  51.6%,100%{ transform:scaleY(0); }
}
@keyframes porf-lengua{
  0%,29%  { transform:scaleY(0); }
  34%     { transform:scaleY(1); }
  43%     { transform:scaleY(1); }
  47%     { transform:scaleY(0); }
  73%     { transform:scaleY(0); }
  77%     { transform:scaleY(1); }
  86%     { transform:scaleY(0); }
  100%    { transform:scaleY(0); }
}
@media (max-width:720px){
.bot__txt{ display:none; }
.bot{ padding:8px; }
}
@media (prefers-reduced-motion:reduce){
.tapa__foto, .cab, .tt__l1, .tt__l2, .aviso,
  .porf, .porf__gesto, .porf__parpado, .porf__lengua{ animation:none !important; }
}
@media (max-width:720px){
.bot{
    bottom:calc(18px + env(safe-area-inset-bottom)
                + (var(--aviso-h, 66px) + 10px) * (1 - var(--m, 0)));
  }
}
@media (min-width:1181px){
.bot{ right:max(18px, calc((100% - min(var(--marco), var(--marco-max))) / 2)); }
}
@media (max-width:1180px){
.bot{ padding:7px; }
.porf{ width:47px; height:47px; flex:0 0 47px; }
}
html.con-menu .bot{ visibility:hidden; pointer-events:none; }

/* ============================================================
   BOLITA AL HACER SCROLL
   Mientras el papá baja, Porfirio se hace bolita y un poco más chico para no
   tapar el contenido; sigue respirando, parpadeando y brincando (no se toca
   ninguna animación: se encoge por tamaño, nunca por `transform`, porque el
   transform es de quien lo hace rebotar). Al pasar el cursor —o al parar el
   scroll en celular, donde no hay hover— vuelve a grande y a mostrar su
   invitación. Nunca se encoge con el chat abierto.
   ============================================================ */
.bot{ transition:transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease, padding .34s cubic-bezier(.34,1.4,.64,1); }
.bot__txt{
  display:block; max-width:22ch; overflow:hidden; white-space:nowrap;
  transition:max-width .34s cubic-bezier(.34,1.4,.64,1), opacity .2s ease .06s, margin .34s ease;
}
.porf{ transition:width .34s cubic-bezier(.34,1.4,.64,1), height .34s cubic-bezier(.34,1.4,.64,1), flex-basis .34s cubic-bezier(.34,1.4,.64,1); }

html:not(.pchat-abierto) .bot.es-bolita{ padding:5px; box-shadow:0 5px 14px rgba(6,42,77,.22); }
html:not(.pchat-abierto) .bot.es-bolita .bot__txt{ max-width:0; opacity:0; transition-delay:0s; margin-left:-11px; }
html:not(.pchat-abierto) .bot.es-bolita .porf{ width:37px; height:37px; flex-basis:37px; }
/* Móvil: 34 + 5 de padding a cada lado = 44 px de área táctil, el mínimo
   recomendado (con 32 se quedaba en 42). */
@media (max-width:1180px){ html:not(.pchat-abierto) .bot.es-bolita .porf{ width:34px; height:34px; flex-basis:34px; } }
/* el hover la despierta antes de que el temporizador la suelte */
.bot.es-bolita:hover, .bot.es-bolita:focus-visible{ padding:9px 20px 9px 9px; box-shadow:0 16px 38px rgba(6,42,77,.36); }
.bot.es-bolita:hover .bot__txt, .bot.es-bolita:focus-visible .bot__txt{ max-width:22ch; opacity:1; margin-left:0; }
.bot.es-bolita:hover .porf, .bot.es-bolita:focus-visible .porf{ width:56px; height:56px; flex-basis:56px; }
@media (max-width:1180px){ .bot.es-bolita:hover .porf, .bot.es-bolita:focus-visible .porf{ width:47px; height:47px; flex-basis:47px; } }
@media (max-width:720px){ .bot__txt{ display:none; } }
@media (prefers-reduced-motion:reduce){ .bot, .bot__txt, .porf{ transition:none !important; } }