/* ==========================================================================
   Firma Ritualia · crédito discreto en el pie de las webs que hacemos
   Isotipo chico del logo 2026 (SVG de los maestros, sin redibujar) en el vértice derecho del pie.
   Al pasar el cursor, con foco o al primer toque aparece el crédito.
   Variables por web (opcionales):
     --firma-tam      tamaño del isotipo (22px)
     --firma-reposo   opacidad en reposo (0.5)
     --firma-color    color del texto del crédito (hereda el del pie)
     --firma-fuente   tipografía del crédito (hereda la del pie)
   ========================================================================== */
.firma-ritualia {
  --firma-tam: 22px;
  --firma-reposo: 0.5;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: calc(var(--firma-tam) + 16px);   /* área táctil cómoda sin agrandar el isotipo */
  height: calc(var(--firma-tam) + 16px);
  margin: -8px;
  color: var(--firma-color, inherit);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.firma-ritualia img {
  display: block;
  width: var(--firma-tam);
  height: auto;
  opacity: var(--firma-reposo);
  transition: opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* El crédito aparece a la izquierda del isotipo, centrado en su línea (no pisa filetes del pie).
   En celular igual: la firma va a la derecha y el crédito nace hacia la izquierda. Si el pie se apila,
   la firma queda sola en su línea, alineada al margen derecho (align-self: flex-end en la web). */
.firma-ritualia__texto {
  position: absolute;
  right: calc(100% - 2px);
  top: 50%;
  white-space: nowrap;
  font-family: var(--firma-fuente, inherit);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: none;
  color: inherit;
  pointer-events: none;
  opacity: 0;
  transform: translate(4px, -50%);
  transition: opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.firma-ritualia:hover img,
.firma-ritualia:focus-visible img,
.firma-ritualia.is-abierta img { opacity: 1; }
.firma-ritualia:hover .firma-ritualia__texto,
.firma-ritualia:focus-visible .firma-ritualia__texto,
.firma-ritualia.is-abierta .firma-ritualia__texto { opacity: 1; transform: translate(0, -50%); }
.firma-ritualia:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .firma-ritualia img, .firma-ritualia__texto { transition: none; }
}