/* =====================================================================
   DONAR: el botón "Dona aquí" en tres variantes (Teletón 2026, portada en vivo)
   Dueño: etapa Donar. Lo monta TG.donar.mount (src/donar.js). Cargar DESPUÉS de base.css.
   Medidas y estados: SPEC.md §6. Referencias: ref/referencias-camilo.md.

   Variantes:  .tgd--tecla      tecla en perspectiva con espesor, luz roja y reflejo
               .tgd--sello      cuerpo con línea discontinua que se levanta de su sello
               .tgd--corazones  botón que lanza corazones (las partículas las dibuja el JS)
   Tamaños:    .tgd--grande (bloque, 64)  .tgd--mediano (fila, 48)  .tgd--pildora (header, 44)
   Fondos:     .tgd--sobre-noche  .tgd--sobre-rojo  .tgd--sobre-blanco

   Estados que pone el JS en el <a>:
     data-hover    puntero fino encima (nunca en táctil: no hay hover "pegado")
     data-presion  presionado (puntero o Enter); dura al menos 120 ms para que se vea
     data-quieto   TG.reducedMotion() (incluye "Pausar animaciones" y prefers-reduced-motion)
     data-forzar   "hover" | "presion" | "foco" (galería del visor y pruebas)
   Solo rojo #f5313e / #e12d39, noche #160307 y blanco. La luz roja de la tecla es la única
   luz permitida; nada semitransparente sobre el rojo del hero.
   ===================================================================== */

/* ---------- 1. Común ---------- */
.tgd {
  --tgd-alto: 48px;               /* alto total, espesor o sombra incluidos */
  --tgd-txt: 16px;                /* "Dona aquí" (× --a11y-fs) */
  --tgd-ico: 18px;                /* corazón (× --a11y-fs) */
  --tgd-padx: 16px;
  --tgd-gap: 8px;
  --tgd-foco: #fff;               /* 3 px blanco sobre noche o rojo; noche sobre blanco */
  --tgd-sombra-rojo: 0 8px 14px rgba(90, 5, 12, 0.35);
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 120px;
  min-height: var(--tgd-alto);
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: var(--tg-font, "Duplet Rounded", system-ui, sans-serif);
  font-weight: 800;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor: pointer;
  isolation: isolate;
  outline: none;
}
.tgd:focus { outline: none; }
.tgd--grande {
  --tgd-alto: 64px;
  --tgd-txt: 22px;
  --tgd-ico: 24px;
  --tgd-padx: 22px;
  --tgd-gap: 10px;
}
.tgd--pildora {
  --tgd-alto: 44px;
  --tgd-padx: 18px;
  display: inline-flex;
  width: auto;
  min-width: 0;
  vertical-align: middle;
}
@media (max-width: 359.98px) {
  .tgd--mediano { --tgd-txt: 15px; }
}
.tgd--sobre-blanco { --tgd-foco: #160307; }

.tgd-contenido {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tgd-gap);
  min-width: 0;
  pointer-events: none;
}
.tgd-corazon {
  width: calc(var(--tgd-ico) * var(--a11y-fs, 1));
  height: calc(var(--tgd-ico) * var(--a11y-fs, 1));
  flex: none;
  transform-origin: 50% 55%;
  transition: fill 160ms ease, transform 200ms var(--tg-ease-resorte, cubic-bezier(.34, 1.56, .64, 1));
}
.tgd-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.tgd-texto {
  font-size: calc(var(--tgd-txt) * var(--a11y-fs, 1));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.tgd--grande .tgd-texto { letter-spacing: -0.012em; line-height: 1; }
.tgd--grande .tgd-apoyo { margin-top: 2px; line-height: 1.05; }
.tgd-apoyo {
  margin-top: 3px;
  font-size: calc(13px * var(--a11y-fs, 1));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* el foco rodea la pieza que se ve (cara, cuerpo), nunca la luz ni la sombra */
.tgd:is(:focus-visible, [data-forzar="foco"]) :is(.tgd-cara, .tgd-cuerpo) {
  outline: 3px solid var(--tgd-foco);
  outline-offset: 4px;
}
.tgd--corazones:is(:focus-visible, [data-forzar="foco"]) .tgd-cuerpo { outline-offset: 3px; }
.tgd[data-quieto] *,
.tgd[data-quieto] *::before,
.tgd[data-quieto] *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tgd *,
  .tgd *::before,
  .tgd *::after { transition: none !important; animation: none !important; }
}

/* capa de partículas de "Corazones" (la crea el JS, aria-hidden, sin puntero) */
.tgd-particulas {
  position: absolute;
  pointer-events: none;
  z-index: var(--tg-z-particulas, 40);
  contain: strict;
}

/* =====================================================================
   2. TECLA (keycap): cara + espesor en el mismo plano inclinado, luz roja detrás
      y reflejo bajo el piso. Vista frontal con inclinación leve (SPEC 6.2): el texto se lee derecho.
   ===================================================================== */
.tgd--tecla {
  --E: 6px;                       /* espesor */
  --F: 4px;                       /* flota sobre el piso */
  --r: 12px;
  --incl: 20deg;                  /* SPEC pide 14°; 20° con perspectiva 520 deja ver la tecla en 3D y el texto sigue derecho */
  --persp: 520px;
  --tgd-cara: #e12d39;
  --tgd-cara-borde: #c9252f;      /* borde de la cara cóncava (más oscuro que #e12d39) */
  --tgd-tinta: #fff;
  --tgd-pared-alta: #ad222c;      /* mezclas de #e12d39 con #160307 (74, 58 y 42 %) */
  --tgd-pared: #8d1b24;
  --tgd-pared-baja: #6c151c;
}
.tgd--tecla.tgd--grande { --E: 12px; --F: 6px; --r: 16px; }
.tgd--tecla.tgd--pildora { --E: 4px; --F: 3px; --r: 12px; }

.tgd-escena {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.tgd-flota {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
/* la perspectiva va en el padre (propiedad perspective) y no como perspective() en el transform:
   WebKit/Safari inclinaba el texto como cursiva con perspective() dentro del transform */
.tgd--tecla .tgd-flota {
  perspective: var(--persp);
  perspective-origin: 50% 100%;
}
.tgd-tecla {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: var(--E);
  transform-origin: 50% 100%;
  transform: rotateX(var(--incl));
  transition: transform 260ms var(--tg-ease-resorte, cubic-bezier(.34, 1.56, .64, 1));
}
.tgd-pared {
  /* el espesor: nace bajo la curva de la cara y se abre hacia abajo, como la falda de una tecla
     real (no asoma como una placa al costado de la cara) */
  position: absolute;
  left: calc(var(--E) * -0.34);
  right: calc(var(--E) * -0.34);
  top: calc(100% - var(--E) - var(--r) * 1.15);
  bottom: 0;
  border-radius: calc(var(--r) + 2px);
  background:
    linear-gradient(90deg, rgba(22, 3, 7, 0.55), rgba(22, 3, 7, 0) 9%, rgba(255, 255, 255, 0.07) 50%, rgba(22, 3, 7, 0) 91%, rgba(22, 3, 7, 0.55)),
    linear-gradient(180deg, var(--tgd-pared-alta) 0%, var(--tgd-pared) 62%, var(--tgd-pared-baja) 100%);
  /* filo de luz roja alrededor del espesor (el "prisma" de la referencia) */
  box-shadow:
    inset 0 -2px 0 rgba(22, 3, 7, 0.45),
    inset 0 1px 0 rgba(255, 120, 128, 0.3),
    0 0 18px 1px rgba(245, 49, 62, 0.5),
    0 12px 28px -6px rgba(245, 49, 62, 0.72);
  transition: box-shadow 200ms ease;
}
.tgd-cara {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: calc(var(--tgd-alto) - var(--E));
  padding: 6px var(--tgd-padx);
  border-radius: var(--r);
  /* cara cóncava: el centro conserva #e12d39 (4,53:1 con blanco) y los bordes oscurecen; arriba, un
     labio de brillo que muere antes de llegar a las letras (el texto sigue sobre #e12d39 o más oscuro) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0, rgba(255, 255, 255, 0.05) 9%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(120% 150% at 50% 38%, var(--tgd-cara) 58%, var(--tgd-cara-borde) 100%);
  background-color: var(--tgd-cara);
  color: var(--tgd-tinta);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px -3px rgba(22, 3, 7, 0.3),
    0 1px 0 rgba(22, 3, 7, 0.35);
  transform: translateY(0);
  transition:
    transform 260ms var(--tg-ease-resorte, cubic-bezier(.34, 1.56, .64, 1)),
    background-color 160ms ease;
}
.tgd--tecla .tgd-texto,
.tgd--tecla .tgd-apoyo { text-shadow: 0 1px 0 rgba(22, 3, 7, 0.28); transition: text-shadow 200ms ease; }
.tgd--tecla .tgd-corazon { filter: drop-shadow(0 1px 0 rgba(22, 3, 7, 0.28)); }

/* luz roja bajo la tecla: un charco de luz en el piso que asoma por los lados y por debajo */
.tgd-luz {
  position: absolute;
  z-index: -1;
  left: -4%;
  right: -4%;
  top: 40%;
  bottom: calc(-1 * var(--F) - var(--tgd-alto) * 0.42);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 49, 62, 0.95) 0%, rgba(245, 49, 62, 0.55) 45%, rgba(225, 45, 57, 0.18) 75%, rgba(225, 45, 57, 0) 100%);
  filter: blur(10px);
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 200ms ease, filter 200ms ease, transform 200ms ease;
}
/* reflejo bajo el piso: la tecla reflejada, que se apaga rápido hacia abajo */
.tgd-reflejo {
  position: absolute;
  z-index: -1;
  left: 2%;
  right: 2%;
  top: calc(100% + var(--F));
  height: calc(var(--tgd-alto) * 0.42);
  border-radius: var(--r) var(--r) 40% 40% / var(--r) var(--r) 70% 70%;
  background: linear-gradient(180deg, #f5313e 0%, #e12d39 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.18) 40%, transparent 80%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.18) 40%, transparent 80%);
  filter: blur(9px);
  opacity: 0.55;
  transform-origin: 50% 0;
  transform: scaleX(0.96);
  pointer-events: none;
  transition: opacity 200ms ease, filter 200ms ease, transform 260ms var(--tg-ease-resorte, cubic-bezier(.34, 1.56, .64, 1));
}
.tgd--mediano .tgd-reflejo,
.tgd--pildora .tgd-reflejo { filter: blur(7px); }
/* bloque: la luz se queda más pegada a la tecla (debajo va "Botón digital del Banco de Chile") */
.tgd--tecla.tgd--grande .tgd-luz { bottom: calc(-1 * var(--F) - var(--tgd-alto) * 0.27); }
.tgd--tecla.tgd--grande .tgd-reflejo { height: calc(var(--tgd-alto) * 0.34); }

/* hover (puntero fino): baja 1 px, la luz sube y el reflejo se vuelve nítido */
.tgd--tecla:is([data-hover], [data-forzar="hover"]) .tgd-cara {
  transform: translateY(1px);
  transition-duration: 200ms;
}
/* el reflejo se aviva pero sigue siendo reflejo (desenfocado y apagándose hacia abajo), no un segundo botón */
.tgd--tecla:is([data-hover], [data-forzar="hover"]) .tgd-reflejo { opacity: 0.72; filter: blur(5px); }
.tgd--tecla:is([data-hover], [data-forzar="hover"]) .tgd-luz { opacity: 1; filter: blur(12px); transform: scale(1.04); }
.tgd--tecla:is([data-hover], [data-forzar="hover"]) .tgd-pared {
  box-shadow:
    inset 0 -2px 0 rgba(22, 3, 7, 0.45),
    inset 0 1px 0 rgba(255, 120, 128, 0.42),
    0 0 26px 3px rgba(245, 49, 62, 0.66),
    0 16px 36px -6px rgba(245, 49, 62, 0.92);
}
.tgd--tecla:is([data-hover], [data-forzar="hover"]) :is(.tgd-texto, .tgd-apoyo) {
  text-shadow: 0 1px 0 rgba(22, 3, 7, 0.28), 0 0 12px rgba(255, 255, 255, 0.55);
}
/* presión: baja hasta espesor 1 y se endereza en 100 ms; al soltar vuelve con resorte (260 ms) */
.tgd--tecla:is([data-presion], [data-forzar="presion"]) .tgd-tecla {
  transform: rotateX(0deg);
  transition: transform 100ms ease-out;
}
.tgd--tecla:is([data-presion], [data-forzar="presion"]) .tgd-cara {
  transform: translateY(calc(var(--E) - 1px));
  transition: transform 100ms ease-out, background-color 100ms ease;
}
/* presionada, la tecla queda más cerca del piso: su reflejo sube y se acerca */
.tgd--tecla:is([data-presion], [data-forzar="presion"]) .tgd-reflejo {
  opacity: 0.78;
  filter: blur(4px);
  transform: translateY(calc(var(--F) * -0.7)) scaleX(0.96);
  transition-duration: 100ms;
}
.tgd--tecla:is([data-presion], [data-forzar="presion"]) .tgd-luz { opacity: 1; filter: blur(8px); transform: scale(0.96, 0.9); }

/* sobre blanco: misma tecla roja; la luz baja un poco y suma una sombra noche de apoyo */
.tgd--tecla.tgd--sobre-blanco .tgd-luz { opacity: 0.4; }
.tgd--tecla.tgd--sobre-blanco .tgd-reflejo { opacity: 0.35; }
.tgd--tecla.tgd--sobre-blanco .tgd-pared {
  box-shadow: inset 0 -2px 0 rgba(22, 3, 7, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 16px -8px rgba(22, 3, 7, 0.5);
}

/* sobre rojo (píldora del header): tecla blanca, texto rojo accesible, espesor noche, sin luz */
.tgd--tecla.tgd--sobre-rojo {
  --tgd-cara: #fff;
  --tgd-cara-borde: #f1e9ea;
  --tgd-tinta: #e12d39;
  --tgd-pared-alta: #3a0d14;
  --tgd-pared: #2a0910;
  --tgd-pared-baja: #160307;
}
.tgd--tecla.tgd--sobre-rojo .tgd-luz,
.tgd--tecla.tgd--sobre-rojo .tgd-reflejo { display: none; }
.tgd--tecla.tgd--sobre-rojo .tgd-pared,
.tgd--tecla.tgd--sobre-rojo:is([data-hover], [data-forzar="hover"]) .tgd-pared {
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--tgd-sombra-rojo);
}
.tgd--tecla.tgd--sobre-rojo .tgd-cara {
  box-shadow: inset 0 0 0 1px rgba(22, 3, 7, 0.06), inset 0 -3px 6px -3px rgba(22, 3, 7, 0.14), 0 1px 0 rgba(22, 3, 7, 0.4);
}
.tgd--tecla.tgd--sobre-rojo :is(.tgd-texto, .tgd-apoyo) { text-shadow: none; }
.tgd--tecla.tgd--sobre-rojo .tgd-corazon { filter: none; }
.tgd--tecla.tgd--sobre-rojo .tgd-apoyo { color: rgba(22, 3, 7, 0.74); }
.tgd--tecla.tgd--sobre-rojo:is([data-hover], [data-forzar="hover"]) :is(.tgd-texto, .tgd-apoyo) {
  text-shadow: 0 0 10px rgba(225, 45, 57, 0.35);
}

/* movimiento reducido o "Pausar": sin inclinación ni transiciones; luz quieta; la presión solo oscurece */
.tgd--tecla[data-quieto] .tgd-tecla { transform: none !important; }
.tgd--tecla[data-quieto] .tgd-cara { transform: none !important; }
.tgd--tecla[data-quieto] .tgd-reflejo { opacity: 0.45 !important; filter: blur(9px) !important; transform: scaleX(0.96) !important; }
.tgd--tecla[data-quieto] .tgd-luz { opacity: 0.6 !important; filter: blur(10px) !important; transform: none !important; }
.tgd--tecla[data-quieto]:is([data-presion], [data-forzar="presion"]) .tgd-cara {
  background: var(--tg-rojo-presion, color-mix(in srgb, #e12d39 80%, #160307));
}
.tgd--tecla.tgd--sobre-rojo[data-quieto]:is([data-presion], [data-forzar="presion"]) .tgd-cara {
  background: #fff;
  box-shadow: inset 0 0 0 2px #e12d39;
}

/* =====================================================================
   3. SELLO: cuerpo con línea discontinua que se levanta de su sello (sombra sólida
      desplazada que se queda en el lugar original). Todo cabe en la caja: la base va
      corrida "o" abajo a la derecha y el cuerpo se mueve entre 0 y "o".
   ===================================================================== */
.tgd--sello {
  --o: 6px;                       /* desplazamiento completo (hover) */
  --o-reposo: 4px;                /* reposo, también en táctil: ya se ve despegado de su sello */
  --r: 14px;
  --tgd-cuerpo: #e12d39;
  --tgd-tinta: #fff;
  --tgd-trazo: #fff;
  --tgd-trazo-in: 4px;            /* la línea discontinua va por dentro del borde, como un timbre */
  --tgd-base: #fff;
  --tgd-paso: 24;                 /* dos vueltas del patrón 7 + 5: la línea "corre" sin saltar */
  /* volumen del cuerpo: filo claro arriba y apoyo oscuro abajo (sin luz: solo sombra y borde) */
  --tgd-volumen: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -2px 0 rgba(22, 3, 7, 0.22);
}
.tgd--sello.tgd--mediano,
.tgd--sello.tgd--pildora { --tgd-paso: 21; }
.tgd--sello.tgd--grande { --o: 8px; --o-reposo: 5px; --r: 18px; --tgd-trazo-in: 4px; }
.tgd--sello.tgd--pildora { --o: 5px; --o-reposo: 3px; --r: 999px; --tgd-trazo-in: 3px; --tgd-padx: 19px; }

.tgd--sello .tgd-base {
  position: absolute;
  z-index: 0;
  top: var(--o);
  left: var(--o);
  right: 0;
  bottom: 0;
  border-radius: var(--r);
  background: var(--tgd-base);
  pointer-events: none;
}
.tgd--sello .tgd-flota {
  z-index: 1;
  margin: 0 var(--o) var(--o) 0;
}
.tgd--sello .tgd-cuerpo {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: calc(var(--tgd-alto) - var(--o));
  /* aire entre el texto y la línea discontinua, también con A++ */
  padding: calc(var(--tgd-trazo-in) + 4px) calc(var(--tgd-padx) + var(--tgd-trazo-in));
  border-radius: var(--r);
  background: var(--tgd-cuerpo);
  color: var(--tgd-tinta);
  box-shadow: var(--tgd-volumen);
  transform: translate(calc(var(--o) - var(--o-reposo)), calc(var(--o) - var(--o-reposo)));
  transition:
    transform 180ms cubic-bezier(.3, 1.45, .55, 1),
    border-radius 180ms ease;
}
.tgd-trazo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.tgd-trazo rect {
  x: var(--tgd-trazo-in);
  y: var(--tgd-trazo-in);
  width: calc(100% - var(--tgd-trazo-in) * 2);
  height: calc(100% - var(--tgd-trazo-in) * 2);
  /* --tgd-rmax = mitad del alto del cuerpo (lo mide el JS): sin él, rx y ry se recortan por separado y la píldora queda ovalada */
  rx: max(0px, calc(min(var(--r), var(--tgd-rmax, 999px)) - var(--tgd-trazo-in)));
  ry: max(0px, calc(min(var(--r), var(--tgd-rmax, 999px)) - var(--tgd-trazo-in)));
  fill: none;
  stroke: var(--tgd-trazo);
  stroke-width: 2px;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset 700ms var(--tg-ease-expo, cubic-bezier(.16, 1, .3, 1)),
    rx 180ms ease,
    ry 180ms ease;
}
.tgd--pildora .tgd-trazo rect,
.tgd--mediano .tgd-trazo rect { stroke-dasharray: 6 4.5; }
.tgd--sello .tgd-corazon { fill: transparent; }

/* hover (puntero fino): se levanta entero, el radio baja 4 px, el corazón se rellena y la línea corre una vez */
.tgd--sello:is([data-hover], [data-forzar="hover"]) .tgd-cuerpo {
  transform: translate(0, 0);
  border-radius: max(0px, calc(var(--r) - 4px));
}
.tgd--sello:is([data-hover], [data-forzar="hover"]) .tgd-trazo rect {
  rx: max(0px, calc(min(var(--r) - 4px, var(--tgd-rmax, 999px)) - var(--tgd-trazo-in)));
  ry: max(0px, calc(min(var(--r) - 4px, var(--tgd-rmax, 999px)) - var(--tgd-trazo-in)));
  stroke-dashoffset: -24;
}
.tgd--sello:is([data-hover], [data-forzar="hover"], [data-presion], [data-forzar="presion"]) .tgd-corazon { fill: currentColor; }
/* con el mouse encima de verdad (no en los estados fijos de la galería), la línea corre como un
   troquel vivo mientras dure el hover; se detiene al salir. Nunca con movimiento reducido. */
@media (prefers-reduced-motion: no-preference) {
  .tgd--sello[data-hover]:not([data-quieto]):not([data-presion]) .tgd-trazo rect {
    animation: tgd-hormigas 1.1s linear 0.7s infinite;
  }
}
@keyframes tgd-hormigas {
  from { stroke-dashoffset: -24; }
  to { stroke-dashoffset: calc(-24 - var(--tgd-paso)); }
}
/* presión: vuelve a su sello y la sombra queda tapada (90 ms) */
.tgd--sello:is([data-presion], [data-forzar="presion"]) .tgd-cuerpo {
  transform: translate(var(--o), var(--o));
  transition: transform 90ms ease-out, border-radius 90ms ease;
}

/* sobre blanco: cuerpo rojo, sello noche */
.tgd--sello.tgd--sobre-blanco { --tgd-base: #160307; }
/* sobre rojo: cuerpo blanco con línea roja por dentro, sello noche */
.tgd--sello.tgd--sobre-rojo {
  --tgd-cuerpo: #fff;
  --tgd-tinta: #e12d39;
  --tgd-trazo: #e12d39;
  --tgd-base: #160307;
}
.tgd--sello.tgd--sobre-rojo .tgd-apoyo { color: rgba(22, 3, 7, 0.74); }
.tgd--sello.tgd--sobre-rojo { --tgd-volumen: inset 0 -2px 0 rgba(22, 3, 7, 0.1); }

/* movimiento reducido o "Pausar": fijo levantado a medias; la presión pasa de golpe a hundido */
.tgd--sello[data-quieto] .tgd-cuerpo {
  transform: translate(calc(var(--o) - var(--o-reposo)), calc(var(--o) - var(--o-reposo))) !important;
  border-radius: var(--r) !important;
}
.tgd--sello[data-quieto] .tgd-trazo rect {
  stroke-dashoffset: 0 !important;
  rx: max(0px, calc(min(var(--r), var(--tgd-rmax, 999px)) - var(--tgd-trazo-in))) !important;
  ry: max(0px, calc(min(var(--r), var(--tgd-rmax, 999px)) - var(--tgd-trazo-in))) !important;
}
.tgd--sello[data-quieto]:is([data-presion], [data-forzar="presion"]) .tgd-cuerpo {
  transform: translate(var(--o), var(--o)) !important;
}

/* =====================================================================
   4. CORAZONES: botón blanco que lanza corazones (partículas en canvas, JS)
   ===================================================================== */
.tgd--corazones {
  --tgd-cuerpo: #fff;
  --tgd-tinta: #e12d39;
  --tgd-almohada: inset 0 -3px 0 rgba(22, 3, 7, 0.07), inset 0 1px 0 #fff;
  --tgd-sombra: 0 10px 24px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.18);
  --tgd-sombra-hover: 0 16px 32px rgba(0, 0, 0, 0.42), 0 3px 6px rgba(0, 0, 0, 0.2);
}
/* el anillo del latido (27-oct): oculto salvo donde lo encienda donar-latido.css */
.tgd-anillo { display: none; }
.tgd-remezon {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.tgd--corazones .tgd-cuerpo {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--tgd-alto);
  padding: 6px var(--tgd-padx);
  border-radius: 999px;
  background: var(--tgd-cuerpo);
  color: var(--tgd-tinta);
  /* almohada: filo claro arriba y apoyo apenas oscuro abajo, más la sombra de despegue */
  box-shadow: var(--tgd-almohada), var(--tgd-sombra);
  transform: translateY(0) scale(1);
  transition:
    transform 200ms var(--tg-ease-resorte, cubic-bezier(.34, 1.56, .64, 1)),
    box-shadow 200ms ease;
}
.tgd--corazones.tgd--grande .tgd-cuerpo { border-radius: 16px; }
.tgd--corazones .tgd-cuerpo { padding-left: 7px; }
.tgd--corazones.tgd--grande .tgd-cuerpo { padding-left: 12px; padding-right: 26px; }
/* insignia: círculo rojo con el corazón blanco (le da peso de color al botón blanco) */
.tgd-insignia {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: calc(34px * var(--a11y-fs, 1));
  height: calc(34px * var(--a11y-fs, 1));
  border-radius: 999px;
  /* insignia de esmalte: el rojo accesible con un brillo suave arriba a la izquierda y un apoyo
     oscuro abajo (el corazón blanco queda sobre #e12d39 o más oscuro) */
  background: radial-gradient(circle at 34% 28%, #e8323e 0, #e12d39 46%, #c9252f 100%);
  background-color: #e12d39;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(22, 3, 7, 0.2);
  transition: transform 200ms var(--tg-ease-resorte, cubic-bezier(.34, 1.56, .64, 1));
}
.tgd--corazones .tgd-insignia .tgd-corazon { --tgd-ico: 17px; transform-origin: 50% 55%; }
.tgd--corazones.tgd--grande .tgd-insignia { width: calc(42px * var(--a11y-fs, 1)); height: calc(42px * var(--a11y-fs, 1)); }
.tgd--corazones.tgd--grande .tgd-insignia .tgd-corazon { --tgd-ico: 22px; }
.tgd--corazones.tgd--pildora .tgd-insignia { width: calc(30px * var(--a11y-fs, 1)); height: calc(30px * var(--a11y-fs, 1)); }
.tgd--corazones.tgd--pildora .tgd-insignia .tgd-corazon { --tgd-ico: 15px; }
.tgd--corazones .tgd-apoyo { color: rgba(22, 3, 7, 0.74); }
/* onda: anillo sólido del color de la insignia que se abre desde ella con cada ráfaga (lo anima el JS;
   en reposo no se ve). Rojo sobre el botón blanco, blanco sobre el botón rojo. */
.tgd-onda {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #e12d39;
  opacity: 0;
  pointer-events: none;
}
.tgd--corazones.tgd--cuerpo-rojo .tgd-onda { border-color: #fff; }
/* hover: sube 2 px y la sombra crece */
.tgd--corazones:is([data-hover], [data-forzar="hover"]) .tgd-cuerpo {
  transform: translateY(-2px) scale(1);
  box-shadow: var(--tgd-almohada), var(--tgd-sombra-hover);
}
.tgd--corazones:is([data-hover], [data-forzar="hover"]) .tgd-insignia { transform: scale(1.1) rotate(-8deg); }
/* presión: se achica un poco y la sombra se pega (el filo claro se apaga: se hundió) */
.tgd--corazones:is([data-presion], [data-forzar="presion"]) .tgd-cuerpo {
  transform: translateY(0) scale(0.97);
  box-shadow: inset 0 2px 3px rgba(22, 3, 7, 0.12), 0 6px 14px rgba(0, 0, 0, 0.32);
  transition-duration: 90ms;
}
/* sobre rojo: blanco con la sombra del header */
.tgd--corazones.tgd--sobre-rojo {
  --tgd-sombra: var(--tgd-sombra-rojo);
  --tgd-sombra-hover: 0 12px 22px rgba(90, 5, 12, 0.42);
}
/* cuerpo rojo (la clase la pone el JS): rojo accesible con texto blanco (4,53:1) e insignia blanca con
   el corazón rojo. Va en la fila del celular sobre noche, junto a "Activar sonido" (píldora blanca):
   así Donar es el único rojo lleno de la fila y no queda como gemelo blanco (SPEC 0.4); y sobre
   blanco, donde un botón blanco se perdería. El borde rojo contra noche da 4,4:1 (componente, 3:1). */
.tgd--corazones.tgd--cuerpo-rojo {
  --tgd-cuerpo: #e12d39;
  --tgd-tinta: #fff;
  --tgd-almohada: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -3px 0 rgba(22, 3, 7, 0.2);
}
.tgd--corazones.tgd--cuerpo-rojo:is([data-presion], [data-forzar="presion"]) .tgd-cuerpo {
  box-shadow: inset 0 2px 3px rgba(22, 3, 7, 0.28), 0 6px 14px rgba(0, 0, 0, 0.32);
}
.tgd--corazones.tgd--cuerpo-rojo .tgd-insignia {
  background: radial-gradient(circle at 34% 28%, #fff 0, #fff 52%, #efe7e8 100%);
  background-color: #fff;
  color: #e12d39;
  box-shadow: inset 0 -2px 0 rgba(22, 3, 7, 0.14), 0 1px 2px rgba(22, 3, 7, 0.25);
}
.tgd--corazones.tgd--cuerpo-rojo .tgd-apoyo { color: #fff; }
/* sobre blanco: sombra noche suave (la negra pesa demasiado sobre blanco) */
.tgd--corazones.tgd--sobre-blanco {
  --tgd-sombra: 0 10px 22px rgba(22, 3, 7, 0.2), 0 2px 4px rgba(22, 3, 7, 0.1);
  --tgd-sombra-hover: 0 16px 30px rgba(22, 3, 7, 0.24), 0 3px 6px rgba(22, 3, 7, 0.12);
}
/* movimiento reducido: quieto; la presión se marca con un anillo interior rojo (blanco y noche en el cuerpo rojo) */
.tgd--corazones[data-quieto] .tgd-cuerpo,
.tgd--corazones[data-quieto] .tgd-insignia,
.tgd--corazones[data-quieto] .tgd-corazon { transform: none !important; }
.tgd--corazones[data-quieto]:is([data-presion], [data-forzar="presion"]) .tgd-cuerpo {
  box-shadow: inset 0 0 0 2px #e12d39, var(--tgd-sombra);
}
.tgd--corazones.tgd--cuerpo-rojo[data-quieto]:is([data-presion], [data-forzar="presion"]) .tgd-cuerpo {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #160307, var(--tgd-sombra);
}

/* =====================================================================
   5. Alto contraste (html[data-contraste="1"]) y colores forzados del sistema
   ===================================================================== */
html[data-contraste="1"] .tgd--tecla .tgd-luz,
html[data-contraste="1"] .tgd--tecla .tgd-reflejo { display: none; }
html[data-contraste="1"] .tgd--tecla .tgd-cara { box-shadow: inset 0 0 0 2px #fff; }
html[data-contraste="1"] .tgd--tecla.tgd--sobre-blanco .tgd-cara,
html[data-contraste="1"] .tgd--tecla.tgd--sobre-rojo .tgd-cara { box-shadow: inset 0 0 0 2px #160307; }
html[data-contraste="1"] .tgd--tecla .tgd-pared { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.4); }
html[data-contraste="1"] .tgd--tecla :is(.tgd-texto, .tgd-apoyo) { text-shadow: none !important; }
html[data-contraste="1"] .tgd--sello .tgd-trazo rect { stroke-width: 3px; }
html[data-contraste="1"] .tgd--corazones.tgd--cuerpo-rojo .tgd-insignia { box-shadow: inset 0 0 0 2px #160307; }
html[data-contraste="1"] .tgd--corazones .tgd-cuerpo { box-shadow: inset 0 0 0 2px #160307, var(--tgd-sombra); }
html[data-contraste="1"] .tgd--corazones.tgd--cuerpo-rojo .tgd-cuerpo { box-shadow: inset 0 0 0 2px #fff, var(--tgd-sombra); }
html[data-contraste="1"] .tgd--corazones.tgd--cuerpo-rojo.tgd--sobre-blanco .tgd-cuerpo { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #160307; }

@media (forced-colors: active) {
  .tgd-luz,
  .tgd-reflejo,
  .tgd-pared,
  .tgd--sello .tgd-base,
  .tgd-onda,
  .tgd-particulas { display: none !important; }
  .tgd--tecla .tgd-tecla { padding-bottom: 0; transform: none !important; }
  .tgd-cara,
  .tgd-cuerpo {
    forced-color-adjust: none;
    background: ButtonFace !important;
    color: ButtonText !important;
    border: 2px solid ButtonText;
    box-shadow: none !important;
  }
  .tgd--tecla .tgd-cara { min-height: var(--tgd-alto); }
  .tgd--sello .tgd-cuerpo { border-style: dashed; transform: none !important; }
  .tgd--sello .tgd-flota { margin: 0; }
  .tgd-trazo { display: none; }
  .tgd-corazon { fill: ButtonText !important; stroke: ButtonText; }
  .tgd-insignia { forced-color-adjust: none; background: ButtonFace !important; color: ButtonText !important; border: 2px solid ButtonText; box-shadow: none !important; }
  .tgd-texto,
  .tgd-apoyo { text-shadow: none !important; color: ButtonText !important; }
  .tgd:is(:focus-visible, [data-forzar="foco"]) :is(.tgd-cara, .tgd-cuerpo) { outline-color: Highlight; }
}