/* ============================================================
   CÁPSULAS GAMIFICADAS — COMPONENTES
   ------------------------------------------------------------
   Piezas reutilizables en todas las vistas: paneles, botones,
   inputs, chips, tarjetas, barra de XP, toasts y skeletons.
   Todas consumen --accent, así que cambian de color solas según
   el data-category del contenedor padre.
   ============================================================ */

/* ─── Panel ───────────────────────────────────────────────────
   El bloque base del sistema: piedra con bisel y contorno negro.
   ------------------------------------------------------------ */
.panel {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--outline-ring), var(--bevel-out);
  padding: var(--sp-5);
}

.panel--flat {
  box-shadow: var(--outline-ring);
}

.panel--sunken {
  background: var(--bg-2);
  box-shadow: var(--outline-ring), var(--bevel-in);
}

.panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  letter-spacing: var(--ls-display);
  margin-bottom: var(--sp-4);
  color: var(--ink);
}

/* ─── Botones ─────────────────────────────────────────────────
   Bloque saliente que se "hunde" al presionarlo: el bisel pasa de
   --bevel-out a --bevel-in y el bloque baja 2px. Es el gesto que
   hace que se sienta un botón de videojuego y no un div.
   ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--panel-2);
  --btn-ink: var(--ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  letter-spacing: var(--ls-display);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--outline-ring), var(--bevel-out), var(--drop);
  transition:
    transform var(--dur-fast) var(--ease),
    filter var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.btn:hover:not(:disabled):not([aria-disabled='true']) {
  filter: brightness(1.14);
  transform: translateY(-2px);
  box-shadow: var(--outline-ring), var(--bevel-out), var(--drop-lg);
}

.btn:active:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(2px);
  box-shadow: var(--outline-ring), var(--bevel-in);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.btn--primary {
  --btn-bg: var(--accent);
  --btn-ink: var(--on-accent);
}

.btn--gold {
  --btn-bg: var(--gold);
  --btn-ink: var(--on-gold);
}

.btn--danger {
  --btn-bg: var(--redstone);
  --btn-ink: var(--btn-danger-ink);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--ink-2);
  box-shadow: var(--outline-ring);
}
.btn--ghost:hover:not(:disabled) {
  --btn-ink: var(--ink);
  background: var(--panel-2);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: var(--sp-2) var(--sp-3);
  font-size: 9px;
}

/* Botón cuadrado de solo icono (cerrar, colapsar, menú). */
.btn--icon {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
  font-size: var(--fs-pixel);
  font-family: var(--font-pixel);
}

/* Spinner del botón mientras se envía un formulario. */
.btn[data-loading='true'] {
  pointer-events: none;
  opacity: 0.7;
}
.btn[data-loading='true']::after {
  content: '';
  width: 10px;
  height: 10px;
  background: currentColor;
  animation: pixel-spin 800ms steps(8) infinite;
}

@keyframes pixel-spin {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(4px, 0); }
  50%  { transform: translate(4px, 4px); }
  75%  { transform: translate(0, 4px); }
  100% { transform: translate(0, 0); }
}

/* ─── Campos de formulario ────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Sin text-transform: uppercase a propósito. Press Start 2P no trae
   las mayúsculas acentuadas (Ñ, Í, Á), así que "Contraseña" en
   mayúsculas se renderiza "CONTRASEñA" — la ñ cae al font de
   respaldo en mitad de la palabra y se ve roto. Los labels van tal
   cual están escritos en el HTML. */
.field__label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: var(--ls-display);
  color: var(--muted);
}

.field__hint {
  font-size: var(--fs-body-sm);
  color: var(--muted);
}

.field__error {
  font-size: var(--fs-body-sm);
  color: var(--danger-ink);
  min-height: 1.2em;
}

.input {
  width: 100%;
  padding: var(--sp-3);
  background: var(--bg-2);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  box-shadow: var(--outline-ring), var(--bevel-in);
  transition: box-shadow var(--dur-fast) var(--ease);
}

.input::placeholder {
  color: var(--placeholder);
  opacity: 1;   /* Firefox le baja la opacidad por defecto y arruina el contraste */
}

.input:focus {
  outline: none;
  box-shadow:
    0 0 0 var(--px) var(--diamond),
    var(--bevel-in),
    0 0 12px rgba(var(--diamond-rgb), 0.35);
}

.input[aria-invalid='true'] {
  box-shadow: 0 0 0 var(--px) var(--redstone), var(--bevel-in);
}

/* Input con botón interno (ojo de mostrar contraseña). */
.input-group {
  position: relative;
  display: flex;
}
.input-group .input {
  padding-right: 44px;
}
.input-group__action {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-pixel);
  font-size: 18px;
}
.input-group__action:hover {
  color: var(--ink);
}

/* ─── Chips (subcategorías, filtros) ──────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--panel-3);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: var(--ls-display);
  box-shadow: var(--outline-ring), var(--bevel-out);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.chip:hover {
  background: var(--panel-2);
  color: var(--ink);
}

.chip[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent);
}

/* ─── Etiquetas de metadato (dificultad, duración, XP) ────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--inset);
  color: var(--ink-2);
  font-family: var(--font-pixel);
  font-size: 16px;
  line-height: 1.4;
  box-shadow: var(--chip-ring);
}

.tag--xp {
  color: var(--gold-ink);
}

.tag--difficulty[data-difficulty='basico']     { color: var(--diff-basico); }
.tag--difficulty[data-difficulty='intermedio'] { color: var(--diff-intermedio); }
.tag--difficulty[data-difficulty='avanzado']   { color: var(--diff-avanzado); }

/* ─── Tarjeta de cápsula ──────────────────────────────────────
   Es un <button> real, no un div con click: así entra en el orden
   de tabulación, responde a Enter/Espacio y los lectores de
   pantalla la anuncian como accionable sin ayuda extra.
   ------------------------------------------------------------ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--outline-ring), var(--bevel-out), var(--drop);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.card:hover:not([aria-disabled='true']),
.card:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    var(--outline-ring),
    var(--bevel-out),
    var(--drop-lg),
    0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}

.card[aria-disabled='true'] {
  cursor: not-allowed;
  filter: grayscale(0.75) brightness(0.8);
}

/* Franja superior con el color de la categoría. */
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--px);
  background: var(--accent);
  z-index: 2;
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--outline);
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);

  /* Encuadre por tarjeta. Los tres valores los escribe card.js SOLO
     cuando la miniatura es una portada de categoría — ver
     coverFraming() en js/ui/covers.js. Con los defaults de acá la
     transformación es la identidad, así que el arte generado y las
     miniaturas propias quedan exactamente como antes. */
  --img-zoom: 1;
  --img-x: 0%;
  --img-y: 0%;
  transform: scale(var(--img-zoom)) translate(var(--img-x), var(--img-y));
}

/* La miniatura GENERADA de pixel es un paisaje de baja resolución
   escalado: sin "pixelated" se ve borroneado. En cualquier otro
   tema la miniatura es un icono vectorial — el suavizado normal
   del navegador es lo que corresponde.

   El [data-artwork='false'] no es decorativo: desde que existen las
   portadas de categoría (renders reales, ver js/ui/covers.js) una
   tarjeta de pixel puede llevar una FOTO, y pixelarla la destroza.
   card.js marca cada <img> con si lo que muestra es arte real o
   generado. */
:root[data-theme='pixel'] .card__img[data-artwork='false'] {
  image-rendering: pixelated;
}

/* El acercamiento del hover se COMPONE con el encuadre de la tarjeta:
   si acá se escribiera scale(1.06) a secas, cada portada saltaría a su
   posición sin recortar apenas el puntero toca la tarjeta. */
.card:hover .card__img {
  transform: scale(calc(var(--img-zoom) * 1.06)) translate(var(--img-x), var(--img-y));
}

/* Candado de cápsula bloqueada. */
.card__lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  background: rgba(var(--outline-rgb), 0.72);
  font-family: var(--font-pixel);
  font-size: 32px;
  color: var(--ink-2);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  line-height: 1.6;
  letter-spacing: var(--ls-display);
  color: var(--ink);
}

.card__desc {
  font-size: var(--fs-body-sm);
  color: var(--muted);
  /* Recorte a 3 líneas para que la grilla quede pareja. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* Cinta de estado (completada / en progreso) — Fase 3. */
.card__ribbon {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 3;
  padding: 2px var(--sp-2);
  background: var(--grass);
  color: var(--on-grass);
  font-family: var(--font-display);
  font-size: 8px;
  box-shadow: var(--chip-ring);
}

/* ─── Barra de XP ─────────────────────────────────────────── */
.xp-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.xp-bar__level {
  flex: 0 0 auto;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--on-gold);
  font-family: var(--font-display);
  font-size: 8px;
  box-shadow: var(--chip-ring);
}

.xp-bar__track {
  position: relative;
  flex: 1;
  min-width: 80px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  box-shadow: var(--chip-ring), var(--bevel-in);
  overflow: hidden;
}

.xp-bar__fill {
  height: 100%;
  width: 0%;
  background: var(--xp-fill-bg);
  transition: width var(--dur-slow) var(--ease);
}

.xp-bar__value {
  flex: 0 0 auto;
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--gold-ink);
  white-space: nowrap;
}

/* ─── Racha ───────────────────────────────────────────────── */
.streak {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-pixel);
  font-size: 18px;
  color: var(--copper);
}

/* ─── Avatar ──────────────────────────────────────────────── */
.avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  object-fit: cover;
  border-radius: var(--radius-pill);
  background: var(--panel-3);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 10px;
  box-shadow: var(--chip-ring), var(--bevel-out);
}

:root[data-theme='pixel'] .avatar {
  image-rendering: pixelated;
}

/* ─── Skeleton de carga ───────────────────────────────────── */
.skeleton {
  background: var(--panel-2);
  border-radius: var(--radius);
  box-shadow: var(--outline-ring);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: skeleton-sweep 1.2s steps(12) infinite;
}

@keyframes skeleton-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.skeleton-card {
  height: 280px;
}

/* ─── Mensajes en línea ───────────────────────────────────── */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  box-shadow: var(--outline-ring);
}
.alert:empty {
  display: none;
}
.alert--error {
  background: rgba(var(--redstone-rgb), 0.14);
  color: var(--danger-ink);
  border-left: var(--px) solid var(--redstone);
}
.alert--success {
  background: rgba(var(--grass-rgb), 0.14);
  color: var(--success-ink);
  border-left: var(--px) solid var(--grass);
}
.alert--info {
  background: rgba(var(--diamond-rgb), 0.12);
  color: var(--diamond-ink);
  border-left: var(--px) solid var(--diamond);
}

/* ─── Toasts ──────────────────────────────────────────────── */
.toast-region {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(360px, calc(100vw - var(--sp-8)));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink);
  font-size: var(--fs-body-sm);
  box-shadow: var(--outline-ring), var(--bevel-out), var(--drop-lg);
  pointer-events: auto;
  animation: toast-in var(--dur) var(--ease);
}

.toast[data-variant='success'] { border-left: var(--px) solid var(--grass); }
.toast[data-variant='error']   { border-left: var(--px) solid var(--redstone); }
.toast[data-variant='info']    { border-left: var(--px) solid var(--diamond); }

.toast__icon {
  font-family: var(--font-pixel);
  font-size: 20px;
  line-height: 1;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Estado vacío ────────────────────────────────────────── */
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--muted);
}

.empty-state__icon {
  font-family: var(--font-pixel);
  font-size: 56px;
  line-height: 1;
  color: var(--panel-3);
}

.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  color: var(--ink-2);
}

/* ─── Cinta de estado de la tarjeta ───────────────────────── */
.card__ribbon--started {
  background: var(--diamond);
  color: var(--on-diamond);
}

/* Una tarjeta completada baja de intensidad: lo que importa en el
   catálogo es lo que TE FALTA, no lo que ya hiciste. */
.card[data-state='completed'] .card__img {
  opacity: 0.55;
}
.card[data-state='completed'] .card__title {
  color: var(--ink-2);
}
.card[data-state='completed']:hover .card__img {
  opacity: 0.8;
}

/* ─── Aviso de recompensa ─────────────────────────────────── */
.reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

.reward__subtitle {
  font-size: var(--fs-body-sm);
  color: var(--muted);
}

.reward__xp {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: var(--outline-ring), var(--bevel-in);
}

.reward__xp-value {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--gold-ink);
}

.reward__xp-label {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  color: var(--muted);
}

.reward__block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--panel-2);
  box-shadow: var(--outline-ring), var(--bevel-out);
  border-left: var(--px) solid var(--accent);
  /* steps() y no una curva suave: el pixel art no se desliza, salta. */
  animation: reward-pop var(--dur-slow) steps(4);
}

.reward__block--level  { --accent: var(--grass); }
.reward__block--streak { --accent: var(--copper); }
.reward__block--badge  { --accent: var(--gold); }

.reward__block-icon {
  font-family: var(--font-pixel);
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
}

.reward__block-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  line-height: 1.6;
  color: var(--ink);
}

.reward__block-text {
  font-size: var(--fs-body-sm);
  color: var(--muted);
  max-width: 40ch;
}

@keyframes reward-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   ESTILO BLOQUE — marcos, compartimentos e iconos voxel
   ------------------------------------------------------------
   Capa EXCLUSIVA del tema pixel: refuerza la estética hacia los
   menús de Minecraft con marcos gruesos tipo cuadro, compartimentos
   hundidos, sombra dura de icono y texto con sombra. Ningún otro
   tema hereda nada de acá — siguen con las reglas base de más
   arriba, que ya resuelven bordes/sombra a través de tokens suaves. Va al final
   para pisar los estilos base sin tener que reescribirlos.
   ============================================================ */

/* ─── Icono voxel ─────────────────────────────────────────── */
:root[data-theme='pixel'] .voxel {
  display: block;
  width: auto;
  flex: 0 0 auto;
  image-rendering: pixelated;
  /* Sombra proyectada dura: los despega del fondo igual que en
     los menús de referencia, donde cada icono "flota" sobre su tile. */
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.45));
}

:root[data-theme='pixel'] .voxel--lg { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5)); }

/* En cualquier otro tema el icono es solo una imagen: sin drop-shadow
   duro, controla su tamaño el `size` que le pasó el llamador. */
.voxel {
  display: block;
  width: auto;
  flex: 0 0 auto;
}

/* ─── Texto con sombra dura ───────────────────────────────── */
.card__title,
.category-header__title,
.welcome__title,
.sidebar__link,
.stat-block__value,
.badge-card__name,
.modal__title,
.panel__title,
.profile__name,
.profile__section-title,
.auth-view__title,
.auth__hero-title {
  text-shadow: var(--text-shadow);
}

.chip,
.btn,
.tag,
.pill {
  text-shadow: var(--text-shadow-sm);
}

/* ─── Marco tipo cuadro ───────────────────────────────────────
   El contenido queda HUNDIDO dentro de un marco grueso. Se aplica
   con la clase, no por defecto, para no engordar cada caja de la
   interfaz: solo las que hacen de "tablero".
   ------------------------------------------------------------ */
.framed {
  box-shadow: var(--frame-ring), var(--drop-lg);
}

.framed--lg {
  box-shadow: var(--frame-ring-lg), var(--drop-lg);
}

/* ─── Tarjeta de cápsula, con marco ───────────────────────── */
.card {
  background: var(--panel);
  box-shadow: var(--frame-ring), var(--drop);
}

.card:hover:not([aria-disabled='true']),
.card:focus-visible {
  box-shadow:
    var(--frame-ring),
    var(--drop-lg),
    0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* La miniatura es un compartimento hundido dentro del marco. */
:root[data-theme='pixel'] .card__media {
  margin: var(--px);
  box-shadow: var(--slot-in);
}

/* La franja de categoría se corre adentro del marco. */
:root[data-theme='pixel'] .card::before {
  inset: var(--px) var(--px) auto var(--px);
  height: calc(var(--px) * 1.5);
  z-index: 3;
}

:root[data-theme='pixel'] .card__body {
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
}

/* Los metadatos van en su propia bandeja hundida. */
:root[data-theme='pixel'] .card__meta {
  margin: auto calc(-1 * var(--sp-1)) calc(-1 * var(--sp-1));
  padding: var(--sp-2);
  background: var(--inset-soft);
  box-shadow: inset 0 var(--px) 0 0 var(--outline);
}

/* ─── Botones más macizos ─────────────────────────────────── */
:root[data-theme='pixel'] .btn {
  box-shadow:
    0 0 0 var(--px) var(--outline),
    var(--bevel-out),
    var(--drop);
}

:root[data-theme='pixel'] .btn:hover:not(:disabled):not([aria-disabled='true']) {
  box-shadow:
    0 0 0 var(--px) var(--outline),
    var(--bevel-out),
    var(--drop-lg);
}

/* ─── Compartimentos ──────────────────────────────────────── */
.stat-block,
.xp-bar__track,
.badge-card__icon,
.badge-card__track {
  box-shadow: var(--slot-in);
}

/* ─── Interruptor de tema ─────────────────────────────────── */
.theme-toggle {
  --btn-bg: var(--panel-3);
  --btn-ink: var(--ink-2);
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-pixel);
  font-size: 20px;
  line-height: 1;
}

.theme-toggle:hover:not(:disabled) {
  --btn-ink: var(--gold-ink);
}

/* ─── Firma de Terralabs ──────────────────────────────────────
   Crédito de autoría discreto. Ocupa poco, no compite con el
   contenido y se apaga hasta que se lo mira.
   ------------------------------------------------------------ */
.by-terra {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-pixel);
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.by-terra:hover,
.by-terra:focus-visible {
  color: var(--ink);
}

.by-terra__mark {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--grass);
  box-shadow: var(--chip-ring);
  transition: background var(--dur-fast) var(--ease);
}

.by-terra:hover .by-terra__mark,
.by-terra:focus-visible .by-terra__mark {
  background: var(--gold);
}

.by-terra__name {
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

.by-terra:hover .by-terra__name {
  color: var(--grass-ink);
}

/* Variante centrada para el pie de la pantalla de acceso. */
.by-terra--center {
  align-self: center;
  margin-top: var(--sp-2);
}