.fill{
  position:relative;
  overflow:hidden;
  z-index:0;
  
  transition:color .3s ease-out, scale .14s var(--ease-out);
}

.fill::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--fill, var(--rojo));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease-out;
}


@media (hover:hover) and (pointer:fine){
  .fill:hover::before{transform:scaleX(1)}
}


@media (prefers-reduced-motion:reduce){
  .fill,
  .fill::before{transition:none}
}


.fill:active,
.btn.swap:active{ scale:.97 }

.btn.swap{
  transition:background .18s var(--ease-out), color .18s var(--ease-out),
             scale .14s var(--ease-out);
}

@media (prefers-reduced-motion:reduce){
  .fill:active, .btn.swap:active{scale:1}
  .btn.swap{transition:none}
}


.btn.ghost{--fill:var(--tinta)}      
.cuenta{--fill:var(--tinta)}         
.hitos-nav a{--fill:var(--dorado)}