/* Log v1 — sistema visual (PRD §7: minimalismo botánico, oscuro por defecto).
   Tokens y componentes base. Nada de sombras pesadas ni colores de juguete:
   trazos finos, mucho aire, acentos contados. */

/* ---------- Fuentes (autoalojadas, sin CDN) ---------- */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --fondo: #141614;
  --fondo-alzado: #1a1d1a;
  --tinta: #d8d5cc;
  --tinta-suave: rgba(216, 213, 204, 0.62);
  --tinta-tenue: rgba(216, 213, 204, 0.38);
  --linea: rgba(216, 213, 204, 0.14);
  --musgo: #5f8a6a;
  --esmeralda: #2e6b52;
  --flor: #c998a5;
  --dorado: #b99a45;
  --error: #b96a5f;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radio: 10px;
  --transicion: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modo claro derivado (papel cálido, tinta carbón). Básico en v1. */
@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f2efe7;
    --fondo-alzado: #eceade;
    --tinta: #23261f;
    --tinta-suave: rgba(35, 38, 31, 0.66);
    --tinta-tenue: rgba(35, 38, 31, 0.4);
    --linea: rgba(35, 38, 31, 0.16);
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* El atributo hidden SIEMPRE gana, aunque la clase declare display
   (flex/inline-flex pisan el display:none del navegador si no). */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  min-height: 100dvh;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

::selection {
  background: var(--esmeralda);
  color: #eae8e0;
}

/* ---------- Layout ---------- */

.contenedor {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px 56px;
}

.cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 22px 0 8px;
}

.marca {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.01em;
}

.nav {
  display: flex;
  gap: 18px;
}

.nav a {
  font-size: 13px;
  color: var(--tinta-suave);
  transition: color var(--transicion);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--tinta);
}

/* ---------- Componentes ---------- */

.etiqueta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.tarjeta {
  background: var(--fondo-alzado);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 18px 20px;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radio);
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: background var(--transicion), border-color var(--transicion),
    color var(--transicion), opacity var(--transicion);
}

.boton--primario {
  background: var(--esmeralda);
  color: #eae8e0;
}

.boton--primario:hover {
  background: #35795d;
}

.boton--fantasma {
  border: 1px solid var(--linea);
  color: var(--tinta-suave);
}

.boton--fantasma:hover {
  border-color: var(--tinta-suave);
  color: var(--tinta);
}

.boton:disabled {
  opacity: 0.45;
  cursor: default;
}

.campo {
  width: 100%;
  background: var(--fondo-alzado);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--tinta);
  padding: 12px 14px;
  font: inherit;
  transition: border-color var(--transicion);
}

.campo:focus {
  outline: none;
  border-color: var(--musgo);
}

.error {
  color: var(--error);
  font-size: 13px;
  min-height: 1.2em;
}

/* ---------- Home ---------- */

.racha {
  text-align: center;
  padding: 26px 0 10px;
}

.racha__numero {
  font-family: var(--serif);
  font-size: clamp(64px, 22vw, 104px);
  line-height: 1;
  color: var(--dorado);
  font-variant-numeric: tabular-nums;
  /* Glow tenue del dorado (PRD §7, Enmienda 3). */
  text-shadow: 0 0 26px rgba(185, 154, 69, 0.3);
}

.racha__leyenda {
  margin-top: 6px;
  color: var(--tinta-suave);
  font-size: 13px;
}

.arbol-marco {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 20px;
}

.arbol-vacio {
  text-align: center;
  color: var(--tinta-tenue);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
}

.arbol-vacio svg {
  display: block;
  margin: 0 auto 14px;
  stroke: var(--tinta-tenue);
}

.seccion {
  margin-top: 26px;
}

.seccion > .etiqueta {
  display: block;
  margin-bottom: 12px;
}

.jugadas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vacio {
  color: var(--tinta-tenue);
  font-size: 14px;
  padding: 6px 2px;
}

.jugada {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--fondo-alzado);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 14px;
  transition: opacity var(--transicion);
}

.jugada__check {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--tinta-tenue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transicion), border-color var(--transicion);
}

.jugada__check svg {
  width: 14px;
  height: 14px;
  stroke: transparent;
  transition: stroke var(--transicion);
}

.jugada--cumplida .jugada__check {
  background: var(--esmeralda);
  border-color: var(--esmeralda);
}

.jugada--cumplida .jugada__check svg {
  stroke: #eae8e0;
}

.jugada--cumplida .jugada__titulo {
  color: var(--tinta-suave);
}

.jugada--no_cumplida {
  opacity: 0.55;
}

.jugada--no_cumplida .jugada__titulo {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--tinta-tenue);
}

.jugada__titulo {
  flex: 1;
  font-size: 14px;
}

.jugada__sello {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 3px 8px;
}

.boton--ancho {
  width: 100%;
  margin-top: 14px;
}

/* ---------- Check-in de mañana (la voz de Log) ---------- */

.voz-log {
  margin: 0 0 16px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--dorado);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--tinta-suave);
  line-height: 1.6;
}

.voz-log--propuesta {
  border-left-color: var(--musgo);
}

.manana-fila {
  flex-wrap: wrap;
  gap: 8px;
}

.manana-fila__titulo {
  flex: 1 1 100%;
}

.manana-fila__submeta {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}

.manana-fila__quitar {
  flex: none;
  color: var(--tinta-tenue);
  padding: 6px 10px;
  transition: color var(--transicion);
}

.manana-fila__quitar:hover {
  color: var(--tinta);
}

.manana__acciones {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}

/* ---------- Check-in de noche ---------- */

.noche__titulo {
  font-size: 26px;
}

.noche__nota {
  color: var(--tinta-tenue);
  font-size: 13px;
  margin: 6px 0 18px;
}

.jugada {
  flex-wrap: wrap;
}

.noche__opciones {
  display: flex;
  gap: 8px;
  flex: none;
}

.noche__tap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--linea);
  color: var(--tinta-tenue);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transicion), border-color var(--transicion),
    color var(--transicion);
}

.noche__tap--si.noche__tap--activo {
  background: var(--esmeralda);
  border-color: var(--esmeralda);
  color: #eae8e0;
}

.noche__tap--no.noche__tap--activo {
  border-color: var(--tinta-suave);
  color: var(--tinta);
}

.noche__extras {
  width: 100%;
  display: flex;
  gap: 8px;
  padding-top: 10px;
}

.noche__chip {
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--tinta-suave);
  transition: border-color var(--transicion), color var(--transicion),
    background var(--transicion);
}

.noche__chip--activo {
  border-color: var(--musgo);
  color: var(--tinta);
  background: rgba(95, 138, 106, 0.14);
}

.energia {
  display: flex;
  gap: 10px;
  padding: 4px 0;
}

.energia__hoja {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.energia__hoja svg {
  width: 22px;
  height: 22px;
}

/* Vacías: solo contorno. Llenas: cada hoja trae su color inline
   (café seco → verde intenso, el mismo lenguaje del árbol). */
.energia__hoja path {
  fill: none;
  stroke: var(--tinta-tenue);
  transition: fill 240ms ease, stroke 240ms ease;
}

.energia-extremos {
  display: flex;
  justify-content: space-between;
  max-width: 210px;
  font-size: 11px;
  color: var(--tinta-tenue);
  letter-spacing: 0.04em;
  padding: 2px 2px 0;
}

.sin-energia__texto {
  margin: 0 0 10px;
}

@media (prefers-reduced-motion: no-preference) {
  .energia__hoja--pulso svg {
    animation: pulso-hoja 360ms cubic-bezier(0.3, 0.9, 0.4, 1.2);
  }

  @keyframes pulso-hoja {
    0% {
      transform: scale(1);
    }
    45% {
      transform: scale(1.28);
    }
    100% {
      transform: scale(1);
    }
  }

  .energia--atencion .energia {
    animation: atencion-energia 900ms ease;
  }

  @keyframes atencion-energia {
    0%,
    100% {
      transform: none;
    }
    30% {
      transform: translateX(3px);
    }
    60% {
      transform: translateX(-3px);
    }
  }
}

/* ---------- Login ---------- */

.portal {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.portal__caja {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

.portal__marca {
  font-family: var(--serif);
  font-size: 42px;
  margin-bottom: 2px;
}

.portal__lema {
  color: var(--tinta-suave);
  font-size: 14px;
  margin-bottom: 18px;
}

/* ---------- Pantallas de metas (Santuario y detalle) ---------- */

.pantalla__titulo {
  font-size: 26px;
}

.pantalla__nota {
  color: var(--tinta-tenue);
  font-size: 13px;
  margin: 6px 0 18px;
}

.metas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meta-tarjeta {
  background: var(--fondo-alzado);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color var(--transicion), opacity 600ms ease, filter 600ms ease;
}

.meta-tarjeta:hover {
  border-color: var(--tinta-tenue);
}

.meta-tarjeta__enlace {
  display: block;
  padding: 16px 18px;
}

.meta-tarjeta__titulo {
  font-size: 18px;
}

.meta-tarjeta__porque {
  color: var(--tinta-suave);
  font-size: 13px;
  margin: 4px 0 8px;
  font-style: italic;
  font-family: var(--serif);
}

.meta-tarjeta__datos {
  color: var(--tinta-tenue);
  font-size: 12px;
  margin: 0;
}

.meta-porque {
  font-family: var(--serif);
  font-style: italic;
  color: var(--tinta-suave);
  margin: 6px 0 2px;
}

.meta-datos {
  color: var(--tinta-tenue);
  font-size: 12px;
  margin: 4px 0 0;
}

.submeta-fila {
  background: var(--fondo-alzado);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 14px;
}

.submeta-fila__cabeza {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  text-align: left;
}

.submeta-fila__titulo {
  font-size: 14px;
}

.submeta-fila__avance {
  color: var(--tinta-tenue);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.submeta-fila__barra {
  display: block;
  height: 2px;
  background: var(--linea);
  border-radius: 999px;
  margin-top: 10px;
  overflow: hidden;
}

.submeta-fila__relleno {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--musgo), var(--esmeralda));
  border-radius: 999px;
  transition: width 700ms cubic-bezier(0.3, 0, 0.2, 1);
}

.submeta-fila__cuerpo {
  padding-top: 10px;
}

.bitacora {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bitacora__nota {
  font-size: 13px;
  color: var(--tinta-suave);
  border-left: 2px solid var(--esmeralda);
  padding-left: 10px;
}

.bitacora__fecha {
  color: var(--tinta-tenue);
  font-size: 11px;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.formulario__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formulario--linea {
  flex-direction: row;
  gap: 8px;
  margin-top: 12px;
}

.submeta-editar {
  border-top: 1px dashed var(--linea);
  padding-top: 12px;
}

.formulario--linea .campo {
  min-width: 0;
}

.campo--corto {
  flex: none;
  width: 84px;
}

.cuidado {
  border-top: 1px solid var(--linea);
  padding-top: 18px;
}

.cuidado__abrir {
  color: var(--tinta-tenue);
  font-size: 13px;
  transition: color var(--transicion);
}

.cuidado__abrir:hover {
  color: var(--tinta);
}

.cuidado__panel {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cuidado__archivo {
  border-top: 1px dashed var(--linea);
  padding-top: 16px;
}

.cuidado__confirmar {
  margin-top: 12px;
}

.cuidado__botones {
  display: flex;
  gap: 10px;
}

.boton--desactivado {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- Árbol ---------- */

.arbol-vivo {
  width: 100%;
}

.arbol-svg {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  height: auto;
}

/* Marchitamiento: información visual, nunca culpa (PRD §5). */
.rama {
  transition: opacity 600ms ease, filter 600ms ease;
}

.rama--marchita {
  opacity: 0.55;
  filter: saturate(0.4);
}

.rama--seca {
  opacity: 0.32;
  filter: saturate(0.12);
}

/* Legibilidad del árbol (Enmienda 4): tap, foco y etiquetas. */
.arbol-svg {
  /* El feedback de tap es la propia rama, nunca el rectángulo del
     navegador ni cajas de selección. */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  outline: none;
}

.rama-hit {
  cursor: pointer;
  pointer-events: stroke;
  -webkit-tap-highlight-color: transparent;
}

.rama,
.submeta {
  transition: opacity 300ms ease, filter 300ms ease;
}

.arbol--enfocado .rama:not(.rama--contiene-seleccion):not(.seleccionada) {
  opacity: 0.32;
}

.rama.seleccionada {
  filter: brightness(1.28);
}

.submeta.seleccionada {
  filter: brightness(1.45);
}

.rama--contiene-seleccion:not(.seleccionada) .submeta:not(.seleccionada) {
  opacity: 0.5;
}

@media (prefers-reduced-motion: no-preference) {
  /* Encendido: brillo alto + glow breve que se asienta (<800 ms). */
  .rama.seleccionada,
  .submeta.seleccionada {
    animation: encender 620ms ease-out both;
  }

  @keyframes encender {
    0% {
      filter: brightness(1.75) drop-shadow(0 0 7px rgba(123, 179, 137, 0.6));
    }
    100% {
      filter: brightness(1.32) drop-shadow(0 0 2px rgba(123, 179, 137, 0.22));
    }
  }
}

/* Etiquetas ocultas por defecto; aparecen al seleccionar su rama. */
.etiqueta-rama {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  fill: var(--tinta-tenue);
  opacity: 0;
  transition: opacity 250ms ease;
}

.rama.seleccionada .etiqueta-rama,
.rama--contiene-seleccion .etiqueta-rama {
  opacity: 1;
  fill: var(--tinta-suave);
}

/* Luciérnagas con vida: deriva lenta + parpadeo sutil. */
@media (prefers-reduced-motion: no-preference) {
  .luciernaga {
    animation: derivar 12s ease-in-out infinite alternate,
      parpadear 4s ease-in-out infinite;
  }

  @keyframes derivar {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(7px, -9px);
    }
  }

  @keyframes parpadear {
    0%,
    100% {
      opacity: 0.22;
    }
    50% {
      opacity: 0.62;
    }
  }
}

/* Vida del árbol: entrada dibujándose (~1.5 s en total con el verde)
   y balanceo apenas perceptible en reposo. Los orígenes de giro los
   fija arbol.js en la unión de cada rama. */
.tronco,
.rama,
.submeta,
.hoja-viva {
  transform-box: view-box;
}

@media (prefers-reduced-motion: no-preference) {
  .arbol--entrada .tronco {
    animation: brotar 700ms cubic-bezier(0.3, 0.9, 0.35, 1) both;
  }

  .arbol--entrada .rama {
    /* brotar escalonado (delay inline por rama: central primero) +
       mecer perpetuo. Tempo de crecimiento orgánico, no aparición. */
    animation: brotar 1240ms cubic-bezier(0.3, 0.9, 0.35, 1) both,
      mecer 6.5s ease-in-out infinite alternate;
  }

  /* Brisa al tacto: las hojas vuelven suaves a su sitio. */
  .hoja-viva {
    transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  @keyframes brotar {
    from {
      opacity: 0;
      transform: scale(0.86);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes mecer {
    from {
      transform: rotate(-0.45deg);
    }
    to {
      transform: rotate(0.45deg);
    }
  }
}

.chip-rama {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
  /* Acotado al contenedor del árbol (nunca al viewport): centrado,
     ancho máximo dentro de pantalla y salto a dos líneas. */
  max-width: calc(100% - 4px);
  background: var(--fondo-alzado);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 9px 16px;
  font-size: 13px;
  text-align: center;
  z-index: 5;
}

.chip-rama__nombre {
  /* Siempre completo: envuelve a una segunda línea si hace falta. */
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

.chip-rama__progreso {
  color: var(--tinta-suave);
  font-size: 12px;
}

.chip-rama__flecha {
  color: var(--dorado);
}

@media (prefers-reduced-motion: no-preference) {
  .chip-rama:not([hidden]) {
    animation: aparecer 240ms cubic-bezier(0.25, 0.6, 0.3, 1) both;
  }
}

.meta-tarjeta--destacada {
  border-color: var(--dorado);
}

/* El verde se extiende por la rama como tinta en papel (<800 ms). */
@media (prefers-reduced-motion: no-preference) {
  .submeta__verde {
    transition: stroke-dashoffset 700ms cubic-bezier(0.3, 0, 0.2, 1),
      stroke 700ms ease;
  }

  .flor {
    transform-box: fill-box;
    transform-origin: center;
    animation: abrir-flor 640ms cubic-bezier(0.22, 0.9, 0.36, 1.1) both;
  }

  @keyframes abrir-flor {
    from {
      opacity: 0;
      transform: scale(0.25);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

/* ---------- Demo de variantes (temporal, Enmienda 3) ---------- */

.demo-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
}

.demo-nav {
  display: flex;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.demo-nav a {
  color: var(--tinta-tenue);
  border-bottom: 1px solid transparent;
}

.demo-nav a:hover {
  color: var(--tinta);
}

.demo-nav__actual {
  color: var(--dorado);
  border-bottom: 1px solid var(--dorado);
}

/* ---------- Registro libre (bottom-sheet de dos taps) ---------- */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 10, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 20;
}

.hoja-modal {
  width: 100%;
  max-width: 640px;
  background: var(--fondo-alzado);
  border: 1px solid var(--linea);
  border-bottom: none;
  border-radius: var(--radio) var(--radio) 0 0;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (prefers-reduced-motion: no-preference) {
  .hoja-modal {
    animation: subir 260ms cubic-bezier(0.25, 0.6, 0.3, 1) both;
  }

  @keyframes subir {
    from {
      transform: translateY(24px);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
}

.hoja-modal__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hoja-modal__cerrar {
  color: var(--tinta-tenue);
  font-size: 14px;
  padding: 4px 8px;
}

.avance-rama {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  text-align: left;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 14px;
  font-size: 14px;
  transition: border-color var(--transicion);
}

.avance-rama:hover {
  border-color: var(--musgo);
}

.avance-rama__meta {
  color: var(--tinta-tenue);
  font-size: 11px;
}

/* ---------- Movimiento (sutil, con propósito) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .aparece {
    animation: aparecer 500ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
  }

  @keyframes aparecer {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}