/* =====================================================================
   Logotipo de texto "Alcoholímetro": letras llenas de cerveza como un vaso
   (líquido ámbar con espuma que se mueve) y una gota como tilde de la í.
   ===================================================================== */
.wm {
  --wm-top: #ecd9b6;
  display: inline-block; position: relative;
  font-family: var(--font-display, 'Bricolage Grotesque'), system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.035em; line-height: 1;
  padding-top: .14em; margin-top: -.14em; /* sitio para la gota sin mover el texto */
  color: transparent;
  -webkit-background-clip: text; background-clip: text;
  background-color: var(--wm-top);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd27a'/%3E%3Cstop offset='.5' stop-color='%23f5b83d'/%3E%3Cstop offset='1' stop-color='%23e8743b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 50C20 42 40 42 60 50S100 58 120 50V100H0Z' fill='url(%23g)'/%3E%3Cpath d='M-120 50C-100 42 -80 42 -60 50S-20 58 0 50S40 42 60 50S100 58 120 50S160 42 180 50S220 58 240 50' fill='none' stroke='%23fff4d6' stroke-width='8'/%3E%3Ccircle cx='22' cy='78' r='3' fill='%23fff' fill-opacity='.45'/%3E%3Ccircle cx='71' cy='86' r='2.2' fill='%23fff' fill-opacity='.4'/%3E%3Ccircle cx='98' cy='72' r='1.8' fill='%23fff' fill-opacity='.45'/%3E%3Ccircle cx='47' cy='70' r='1.5' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 2.4em 100%; background-position: 0 0;
  animation: wm-wave 7s linear infinite;
  white-space: nowrap;
}
/* La línea de espuma se dibuja más larga que el trozo (y se recorta): así no queda un corte al empalmar
   un trozo con el siguiente, donde la ola va en diagonal */
/* En modo claro la espuma va en ámbar suave (blanca parecería que tacha las letras) */
:root[data-theme="light"] .wm { --wm-top: var(--text); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f2a93b'/%3E%3Cstop offset='.5' stop-color='%23e0801f'/%3E%3Cstop offset='1' stop-color='%23c45f17'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 50C20 42 40 42 60 50S100 58 120 50V100H0Z' fill='url(%23g)'/%3E%3Cpath d='M-120 50C-100 42 -80 42 -60 50S-20 58 0 50S40 42 60 50S100 58 120 50S160 42 180 50S220 58 240 50' fill='none' stroke='%23f6c565' stroke-width='8'/%3E%3Ccircle cx='22' cy='78' r='3' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='71' cy='86' r='2.2' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='98' cy='72' r='1.8' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='47' cy='70' r='1.5' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E"); }
.wm-i { position: relative; }
.wm-drop {
  position: absolute; left: 50%; top: -.04em; width: .3em; height: .42em;
  transform: translateX(-28%) rotate(18deg); transform-origin: 50% 100%;
  filter: drop-shadow(0 .03em .05em rgba(0, 0, 0, .25));
}
.wm-drop path { fill: var(--amber, #f5b83d); }
:root[data-theme="light"] .wm-drop path { fill: #d9771c; }
@keyframes wm-wave { to { background-position: 2.4em 0; } }
@keyframes wm-drip { 0%, 100% { transform: translateX(-28%) rotate(18deg); } 40% { transform: translateX(-28%) translateY(-.06em) rotate(8deg) scale(1.08); } 70% { transform: translateX(-28%) translateY(.02em) rotate(22deg) scale(.96); } }
/* Al pasar por encima, la cerveza se agita y la gota salta */
a:hover > .wm, .brand:hover .wm, .wm:hover { animation-duration: 1.8s; }
a:hover > .wm .wm-drop, .brand:hover .wm .wm-drop, .wm:hover .wm-drop { animation: wm-drip .7s var(--ease-spring, ease) both; }
@media (prefers-reduced-motion: reduce) { .wm, .wm-drop { animation: none !important; } }