/* Lo escondido de los sorteos (web-sorteos): el objeto dorado, al final de un texto de la
   página (sorteo-huevos.js elige cuál), y el aviso al encontrarlo. */
.sh-junto { white-space: nowrap; }
.sh-escondido {
  display: inline-block; vertical-align: -.22em; width: clamp(22px, 1.15em, 34px); height: clamp(22px, 1.15em, 34px);
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.sh-escondido svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 85%; }
.sh-escondido[hidden] { display: none; }
/* Asomando por la esquina de una tarjeta o una foto (sorteo-huevos.js le pone el sitio). */
.sh-escondido--asoma { position: absolute; z-index: 5; width: 30px; height: 30px; }
.sh-escondido--asoma svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.sh-escondido--asoma.is-encontrado svg { filter: drop-shadow(0 0 5px rgba(239,184,20,.95)); }
.sh-escondido:focus-visible { outline: 2px solid #EFB814; outline-offset: 3px; }
.sh-escondido.is-encontrado svg { filter: drop-shadow(0 0 5px rgba(239,184,20,.95)); }
.sh-escondido.is-encontrado .sh-cara { fill: #FFF3B0; }
.sh-escondido.is-encontrado .sh-cara-linea { stroke: #FFF3B0; }
@media (hover: hover) and (pointer: fine) {
  .sh-escondido:hover { transform: scale(1.12); }
}
@media (prefers-reduced-motion: no-preference) {
  .sh-escondido { transition: transform .16s ease; }
  /* Se asoma de vez en cuando: un meneo corto cada seis segundos, hasta que lo encuentras. */
  .sh-escondido:not(.is-encontrado) svg { animation: sh-asoma 6s ease-in-out infinite; }
  .sh-escondido.is-salta svg { animation: sh-salta .5s cubic-bezier(.23, 1, .32, 1); }
}
@keyframes sh-asoma {
  0%, 88%, 100% { transform: rotate(0); }
  91% { transform: rotate(-10deg); }
  94% { transform: rotate(8deg); }
  97% { transform: rotate(-3deg); }
}
@keyframes sh-salta {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(-6deg); }
  100% { transform: scale(1); }
}

/* El aviso: abajo a la izquierda, sin tapar el botón de WhatsApp. */
.sh-aviso {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 950;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 12px; align-items: start;
  width: min(400px, calc(100vw - 100px)); padding: 14px 10px 14px 14px;
  background: #111; color: #fff; border-left: 3px solid #EFB814; box-shadow: 0 14px 34px rgba(0,0,0,.28);
  font-size: 13px; line-height: 1.5;
  opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .25s cubic-bezier(.23, 1, .32, 1);
}
.sh-aviso.is-visible { opacity: 1; transform: none; }
.sh-aviso[hidden] { display: none; }
.sh-aviso-ico svg { display: block; width: 40px; height: 40px; }
.sh-aviso-txt { min-width: 0; }
.sh-aviso strong { display: block; font-size: 14px; font-weight: 900; color: #EFB814; }
.sh-aviso p { margin: 2px 0 0; color: rgba(255,255,255,.86); }
.sh-aviso a { display: inline-block; margin-top: 6px; color: #fff; font-weight: 800; text-decoration: underline; text-decoration-color: #EFB814; text-underline-offset: 3px; }
.sh-aviso-cerrar {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; background: none; color: rgba(255,255,255,.6); font-size: 16px; cursor: pointer;
}
.sh-aviso-cerrar:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .sh-aviso { transform: none; transition: opacity .2s ease; }
}