/* 27-oct-2026: tocar el logo en Mi lugar → la serpiente "nada", salen ondas de agua y un mensaje de aliento.
   Abierto a todos (TODOS en logo-gracias.js). v3: cada toque sube el agua de la pantalla; al llenarse cruza la serpiente. */
#topbar .brand,#inicio .sem-luz{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* cursor:pointer también es lo que hace que el iPhone mande el toque a un div sin botón (escucha delegada) */
body.lg-on[data-tab="lugar"] #topbar .brand,body.lg-on #inicio .sem-luz{cursor:pointer}

/* el círculo de Mi lugar: rebota y la serpiente se mece adentro */
@keyframes lg-boing{0%{transform:none}18%{transform:scale(1.12)}36%{transform:scale(.95)}54%{transform:scale(1.05)}72%{transform:scale(.99)}100%{transform:none}}
@keyframes lg-mece{0%{transform:none}20%{transform:rotate(-9deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}100%{transform:none}}
#inicio .sem-luz.lg-boing{animation:lg-boing .9s cubic-bezier(.3,.7,.4,1) both}
#inicio .sem-luz.lg-boing svg{animation:lg-mece .95s ease-in-out both;transform-origin:50% 55%}
.lg-onda-g{border-width:3px;animation-name:lg-onda-g;animation-duration:1.6s}
@keyframes lg-onda-g{0%{opacity:.9;transform:scale(.95)}70%{opacity:.3}100%{opacity:0;transform:scale(2.3)}}

/* la serpiente nada: vaivén con un poco de impulso */
@keyframes lg-nada{
  0%{transform:none}
  15%{transform:translateX(-2px) rotate(-7deg) scale(1.06)}
  32%{transform:translateX(3px) rotate(6deg) scale(1.1)}
  50%{transform:translateX(-2px) rotate(-4deg) scale(1.07)}
  68%{transform:translateX(2px) rotate(3deg) scale(1.04)}
  84%{transform:translateX(-1px) rotate(-1deg) scale(1.02)}
  100%{transform:none}
}
#topbar .brand.lg-nada{animation:lg-nada .95s cubic-bezier(.3,.7,.4,1) both;transform-origin:22% 55%}

/* ondas que salen desde el ojo de la serpiente */
.lg-onda{position:fixed;z-index:1300;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(20,180,200,.9);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;opacity:0;
  animation:lg-onda 1.5s cubic-bezier(.15,.6,.3,1) forwards}
@keyframes lg-onda{0%{opacity:.95;transform:scale(.4)}70%{opacity:.35}100%{opacity:0;transform:scale(9)}}

/* gotas (y un rombo dorado: el aviso de la marca) que saltan y caen */
.lg-gota{position:fixed;z-index:1301;pointer-events:none;width:10px;height:14px;margin:-7px 0 0 -5px;opacity:0;
  animation:lg-gota var(--dur,1.1s) cubic-bezier(.25,.6,.45,1) var(--ret,0s) forwards}
.lg-gota svg{display:block;width:100%;height:100%}
@keyframes lg-gota{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  12%{opacity:1}
  45%{transform:translate(calc(var(--dx) * .6),var(--alto)) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),calc(var(--alto) * -.2 + 70px)) scale(.8) rotate(var(--gira,0deg))}
}

/* la tarjeta del mensaje, bajo la barra */
.lg-tarjeta{position:fixed;z-index:1350;left:50%;top:calc(env(safe-area-inset-top, 0px) + 66px);width:min(420px,calc(100vw - 32px));
  transform:translate(-50%,-18px) scale(.96);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .3s ease;
  background:#fff;color:var(--tinta,#16232e);border-radius:18px;box-shadow:0 14px 40px rgba(11,58,102,.28),0 2px 6px rgba(11,58,102,.12);
  overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lg-tarjeta.lg-ver{transform:translate(-50%,0) scale(1);opacity:1}
.lg-tarjeta.lg-sale{transform:translate(-50%,-12px) scale(.98);opacity:0;transition:transform .35s ease,opacity .3s ease}
.lg-cuerpo{display:flex;gap:13px;align-items:center;padding:15px 16px 13px}
.lg-cuerpo img{width:46px;height:46px;border-radius:12px;flex-shrink:0;box-shadow:0 3px 10px rgba(11,58,102,.25)}
.lg-txt{min-width:0}
.lg-tit{font:700 16px/1.25 Poppins,system-ui,sans-serif;color:var(--azul,#0b3a66);margin:0 0 3px}
.lg-msj{font-size:14.5px;line-height:1.4;margin:0;color:#2c3a46;text-wrap:pretty}
/* el agua al pie de la tarjeta, en movimiento lento */
.lg-agua{display:block;width:200%;height:16px;animation:lg-agua 3.2s linear infinite}
@keyframes lg-agua{to{transform:translateX(-50%)}}

/* botón "Jugar a la serpiente" de la tarjeta llena (v4) */
.lg-boton{display:inline-flex;align-items:center;gap:6px;margin-top:10px;border:0;border-radius:12px;padding:10px 14px;cursor:pointer;
  font:800 14.5px/1 Poppins,system-ui,sans-serif;color:#062a46;background:linear-gradient(90deg,#14B4C8,#3fd0de);
  box-shadow:0 4px 12px rgba(20,180,200,.35);animation:lg-late 1.4s ease-in-out infinite}
@keyframes lg-late{0%,100%{transform:none}50%{transform:scale(1.05)}}

/* ---------- el agua que sube (v3) ----------
   Encima de la barra (1000), debajo de la serpiente (1250), las ondas (1300) y la tarjeta (1350). No tapa los toques. */
.lg-mar{position:fixed;left:0;right:0;bottom:0;height:100vh;height:100dvh;z-index:1200;pointer-events:none;
  transform:translateY(calc((1 - var(--n, 0)) * 100% + 40px));transition:transform .55s cubic-bezier(.34,1.45,.64,1)}
.lg-mar.lg-bajando{transition:transform .1s linear}
.lg-mar-cuerpo{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,180,200,.45) 0,rgba(18,80,143,.55) 55%,rgba(11,58,102,.7) 100%)}
.lg-ola{position:absolute;left:0;width:200%;height:34px;top:-33px;display:block}
.lg-ola path{fill:rgba(20,180,200,.45)}
.lg-ola1{animation:lg-ola 2.6s linear infinite}
.lg-ola2{top:-40px;opacity:.55;animation:lg-ola 4.4s linear infinite reverse}
@keyframes lg-ola{to{transform:translateX(-50%)}}
.lg-burbuja{position:absolute;bottom:-18px;border-radius:50%;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.65);
  animation:lg-burbuja 2s ease-in forwards}
@keyframes lg-burbuja{0%{transform:translate(0,0);opacity:0}15%{opacity:1}50%{transform:translate(6px,-30vh)}100%{transform:translate(-4px,-62vh);opacity:0}}
/* al llenarse: la serpiente cruza nadando */
.lg-serpiente{position:fixed;z-index:1250;top:44%;left:0;width:130px;height:91px;pointer-events:none;
  animation:lg-cruza 3.2s cubic-bezier(.45,.05,.55,.95) forwards}
.lg-serpiente svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 8px rgba(11,58,102,.35));
  animation:lg-ondula .45s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes lg-cruza{0%{transform:translate(-150px,0)}50%{transform:translate(calc(50vw - 65px),-14px)}100%{transform:translate(calc(100vw + 20px),6px)}}
@keyframes lg-ondula{from{transform:rotate(-6deg) scaleY(.92)}to{transform:rotate(5deg) scaleY(1.06)}}

@media (prefers-reduced-motion:reduce){
  .lg-mar,.lg-serpiente{display:none}
  #topbar .brand.lg-nada,.lg-agua,#inicio .sem-luz.lg-boing,#inicio .sem-luz.lg-boing svg,.lg-boton{animation:none}
  .lg-onda,.lg-gota{display:none}
  .lg-tarjeta,.lg-tarjeta.lg-sale{transition:opacity .2s ease;transform:translate(-50%,0)}
}