/* zaxfun — quién está conectado ahora mismo y, plegado, lo de donar.
 *
 * REGLA DE ESTE BLOQUE: al llegar no se pide nada. Se ve el contador y una
 * frase con guasa; el enlace «invítame uno» es lo único que insinúa algo, y las
 * marchas y el botón viven dentro de `.apoyo-caja`, plegada, hasta que alguien
 * la abre. Lo que NO puede volver es el título tipo «Apoyar zaxfun» ni los
 * precios a la vista: eso se lee como sección de donaciones por simpático que
 * sea el texto.
 *
 * El panel sí lleva marco, y a propósito: el mismo borde, radio y fondo que las
 * tarjetas de los juguetes. Suelto sobre el cielo estrellado, sin caja, el
 * bloque se veía desangelado y rompía la estética del resto de la portada.
 *
 * La paleta y las tipografías salen de hub.css. */

.apoyo {
  position: relative;
  max-width: 600px;
  margin: clamp(2.6rem, 8vw, 4.5rem) auto 0;
  padding: clamp(1.7rem, 5vw, 2.3rem) clamp(1.2rem, 4vw, 2.3rem);
  border: 1px solid var(--panel-borde);
  border-radius: var(--radio);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(111, 211, 255, .09), transparent 62%),
    var(--panel);
  text-align: center;
}

/* ---------- Línea de gente conectada ---------- */

.apoyo-vivo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .35rem .85rem .35rem .7rem;
  border: 1px solid rgba(111, 211, 255, .2);
  border-radius: 999px;
  background: rgba(111, 211, 255, .05);
  color: var(--texto-tenue);
  font-size: .82rem;
  /* Arranca oculto: si el contador no conecta, es mejor que no aparezca nada a
     que aparezca un número inventado. `js/apoyo.js` lo enciende al recibir. */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .5s, transform .5s;
}
.apoyo-vivo.visible { opacity: 1; transform: none; }

.apoyo-vivo b { color: var(--cian); font-variant-numeric: tabular-nums; font-weight: 600; }

.latido {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #57e08a;
  box-shadow: 0 0 10px rgba(87, 224, 138, .9);
}
.latido::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(87, 224, 138, .55);
  border-radius: 50%;
  animation: latir 2.2s ease-out infinite;
}
@keyframes latir {
  0%   { transform: scale(.5); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* El número cambia con un saltito: se nota que está vivo sin ser un parpadeo. */
.apoyo-vivo b.salta { animation: saltar .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes saltar {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-6px); color: #bff0ff; }
  100% { transform: translateY(0); }
}

/* ---------- La frase y el anzuelo ---------- */

.apoyo-frase {
  margin: 1rem auto 0;
  max-width: 46ch;
  color: var(--texto-tenue);
  font-size: .92rem;
}

/* Un enlace de texto, no un botón: la diferencia entre una broma y una caja
   registradora. Se subraya de puntitos para que se vea que se puede tocar. */
.apoyo-invita {
  padding: 0;
  border: 0;
  background: none;
  color: var(--oro);
  font: inherit;
  border-bottom: 1px dotted rgba(255, 212, 121, .5);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}

/* Ya abierta, el enlace deja de llamar la atención: su trabajo está hecho. */
.apoyo-invita[aria-expanded="true"] { color: var(--texto-tenue); border-bottom-color: transparent; }

/* ---------- Lo de donar, plegado ---------- */

/* El `max-height` lo pone `apoyo.js` midiendo el contenido, no se escribe aquí.
 *
 * Se probó antes el truco de `grid-template-rows: 0fr → 1fr` (el que anima
 * hasta una altura desconocida sin JS) y NO sirve aquí: con el hijo en
 * `overflow: hidden` su aportación de tamaño es cero, así que la fila se
 * quedaba en 0 también abierta. Medir en JS es exacto y son cuatro líneas.
 *
 * `visibility` se retrasa medio segundo al cerrar (y nada al abrir) para que el
 * contenido no desaparezca de golpe a mitad del pliegue; en plegado tiene que
 * estar `hidden` de verdad o el tabulador entra en botones que no se ven. */
.apoyo-caja {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height .5s cubic-bezier(.2,.8,.3,1), opacity .4s, visibility 0s .5s;
}
.apoyo-caja.abierta {
  opacity: 1;
  visibility: visible;
  transition: max-height .5s cubic-bezier(.2,.8,.3,1), opacity .4s, visibility 0s;
}

/* `flow-root` no es decorativo: sin él, el `margin-top` de `.apoyo-marchas` se
   colapsa hacia fuera, empuja a `.apoyo-dentro` 24 px hacia abajo y NO cuenta
   en su `scrollHeight`. Resultado: la altura medida se quedaba 24 px corta y la
   última línea del texto salía cortada por abajo. */
.apoyo-dentro { display: flow-root; }

/* ---------- Marchas (los importes) ---------- */

.apoyo-marchas {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.marcha {
  padding: .5rem .9rem;
  border: 1px solid var(--panel-borde);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--texto-tenue);
  font: 500 .88rem/1 var(--tipo-texto);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}

.marcha[aria-pressed="true"] {
  color: var(--oro);
  border-color: rgba(255, 212, 121, .5);
  background: rgba(255, 212, 121, .08);
  transform: translateY(-2px);
}

/* ---------- Barra de impulso ---------- */

/* El margen de abajo tiene que dar para la nota, que va posicionada encima de
   él, MÁS el aire hasta el botón. Con 2rem la nota quedaba pegada al dorado. */
.impulso {
  position: relative;
  height: 3px;
  margin: 1.4rem 0 3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}

.impulso-relleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violeta), var(--cian) 60%, var(--oro));
  box-shadow: 0 0 16px -2px rgba(111, 211, 255, .7);
  transition: width .55s cubic-bezier(.2,.8,.3,1);
}

/* La nave va montada en la punta del relleno. */
.impulso-nave {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 212, 121, .55));
  transition: left .55s cubic-bezier(.2,.8,.3,1);
}
.impulso-nave.empuja { animation: temblor .55s ease-out; }
@keyframes temblor {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  30%      { transform: translate(-50%, -55%) rotate(-6deg); }
  65%      { transform: translate(-50%, -47%) rotate(4deg); }
}

/* Lo que paga cada marcha. Cambia de texto sin mover nada de sitio. */
.impulso-nota {
  position: absolute;
  top: .9rem;
  left: 0;
  right: 0;
  margin: 0;
  color: var(--texto-tenue);
  font-size: .8rem;
  transition: opacity .25s;
}
.impulso-nota.cambiando { opacity: 0; }

/* ---------- Botón ---------- */

.apoyo-boton {
  position: relative;
  display: inline-block;
  padding: .72rem 1.7rem;
  border: 1px solid rgba(255, 212, 121, .45);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 212, 121, .14), rgba(255, 212, 121, .04));
  color: var(--oro);
  font: 600 .95rem/1 var(--tipo-titulo);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s, color .2s;
}

.apoyo-boton:active { transform: translateY(0); }

/* Brillo que cruza el botón cada tanto. Solo se ve con la caja abierta, así que
   no hay nada moviéndose en la portada para quien no ha pedido verlo. */
.apoyo-caja.abierta .apoyo-boton::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .2), transparent);
  animation: barrer 5.5s ease-in-out infinite;
}
@keyframes barrer {
  0%, 62% { left: -60%; }
  86%     { left: 115%; }
  100%    { left: 115%; }
}

.apoyo-nota {
  margin: .85rem auto 0;
  max-width: 40ch;
  color: var(--texto-tenue);
  font-size: .75rem;
  opacity: .75;
}

/* Aviso de que el pago todavía no está conectado (modo muestra). */
.apoyo-aviso {
  margin: .6rem 0 0;
  color: var(--oro);
  font-size: .78rem;
  opacity: 0;
  transition: opacity .3s;
}
.apoyo-aviso.visible { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .latido::after, .apoyo-caja.abierta .apoyo-boton::after { animation: none; }
  .apoyo-vivo b.salta, .impulso-nave.empuja { animation: none; }
  .impulso-relleno, .impulso-nave, .apoyo-caja { transition: none; }
}

/* ---------- El pasar por encima ----------
   TODO el `:hover` de esta hoja, en un solo bloque y encerrado en
   `@media (hover: hover)`. En un teléfono el navegador dispara el hover al
   TOCAR y LO DEJA PUESTO: sin esto, lo que acabas de pulsar se queda encendido
   hasta que toques otra cosa (Pieza 5 del acabado premium).
   El levantarse, el hundirse al pulsar y el aro no están aquí: son el gesto
   común de la casa y viven en `comun/css/tacto.css`, que se carga después. */

/* El foco del teclado NO va dentro de `@media (hover: hover)`: es la única
   pista de dónde estás si navegas con el tabulador, y tiene que funcionar
   igual en una tableta o en un móvil con teclado. */
.apoyo-invita:focus-visible {
    color: #ffe6ab;
    border-bottom-color: rgba(255, 212, 121, .9);
    outline: none;
  }
.apoyo-boton:focus-visible {
    transform: translateY(-2px);
    color: #ffe6ab;
    border-color: rgba(255, 212, 121, .85);
    box-shadow: 0 14px 34px -18px rgba(255, 212, 121, .9);
    outline: none;
  }

@media (hover: hover) {
  .apoyo-invita:hover {
    color: #ffe6ab;
    border-bottom-color: rgba(255, 212, 121, .9);
    outline: none;
  }
  .marcha:hover { color: var(--texto); border-color: rgba(111, 211, 255, .35); }
  .apoyo-boton:hover {
    color: #ffe6ab;
    border-color: rgba(255, 212, 121, .85);
    outline: none;
  }
}